關於覆蓋樣式的CSS問題

Question

我有兩個css文件，global.css和specific.css

在我的HTML中我有

<div class="someForm">
    <form>
        <input type="submit" class="submit red">
    </form>
</div>

在global.css中，我有.someForm form input.submit {background-color: #ccc;}作為默認值。 在specific.css我有.red {background-color: red;}

我在global.css之后調用了specific.css，但按鈕沒有變紅。 我保持默認的灰色“ccc”。 我無法編輯specific.css或編輯舊的global.css樣式。 （舊代碼依賴於它。）我只能向全局添加新的CSS。 有什么東西可以讓按鈕變紅嗎？

Answer 1

具有諷刺意味的是， .red本身是一個不太具體的選擇器，而不是全局的.someForm form input.submit 。 因此，您的提交按鈕將改為采用全局規則的灰色背景。

無論如何，您可以復制現有的全局規則（第一個），但將.red類選擇器附加到此規則，並將其設置為紅色，如下所示：

.someForm form input.submit.red { background-color: red; }

將額外的.red類添加到此選擇器使其比原始.someForm form input.submit選擇器更具體。 由於您的提交按鈕具有兩個類，因此將應用此新規則。

Answer 2

原因是您指定了global.css的選擇器具有比特定的更大的層次結構。 如果你要放置。 someForm .red {background-color: red;}它會起作用。 或者您可以使用{background-color: red !important;}但這是永久覆蓋。

Answer 3

global.css中的選擇器比specific.css中的選擇器更具體，因此它具有優先權。 但是，您可以將!important標志應用於specific.css中的值，以使其優先，如下所示：

.red{background-color:red!important}