用另一個重寫一個css類？

我有一個列表，並定義了li風格。我想要替換單個元素的樣式，但它似乎沒有任何視覺效果。例如：用另一個重寫一個css類？

.myList li { 
    background-color: yellow; 
} 

.foo { 
    background-color: green; 
} 

<ul class='myList'> 
    <li>Hello</li> 
</ul>

當我將項目添加到列表中時，它具有正確應用的.myList li樣式。我現在嘗試刪除所有的風格和應用foo的風格，以單個項目（使用jQuery）：

$(item).removeClass(); 
$(item).addClass("foo");

該項目不改變顏色，綠色的，雖然，但該報告類設置爲「富」：

alert($(item).attr('class'));

，所以我想我不理解CSS規則在這裏，像李類定義只是重寫任何其他我這樣做，但是我想反到是真的，我想覆蓋李樣式定義與富。我們如何做到這一點？

感謝

來源

2010-06-14 user246114

你有沒有試圖改變背景顏色？或者你的實際代碼比那更復雜？ – 2010-06-14 13:09:05

這些是規則集，而不是類（這可能是你誤解的來源）。類是一個HTML概念，而不是CSS。（CSS有匹配HTML類成員的元素的類選擇器） – Quentin 2010-06-14 13:13:15

「.myList li」選擇符比「.foo」選擇符更具體，所以當這兩個規則適用時，該項目將爲黃色。當你做「$（item）.removeClass（）;」時你從li中刪除任何類名，但是如果ul仍然是「myList」類名，那麼li仍然會從「.myList li」選擇器中獲取樣式。更改CSS

一種方法是：

.myList li  { background-color: yellow; } 
.myList li.foo { background-color: green; }

那麼很顯然的是，第二條規則是比第一更具體。

來源

2010-06-14 13:10:10 Douglas

好吧我認爲這對我想要做的很好 - 但現在如果我想爲我的列表元素設置選擇器，現在使用的字符串是完整的東西，例如：$（item）.addClass（「。myList li.foo「）;對吧？ – user246114 2010-06-14 13:27:15

哦，剛剛嘗試過，似乎工作，我可以引用選擇器名稱只是由其最後一個組件（「foo」），謝謝。 – user246114 2010-06-14 13:34:29

你遇到了問題具有特異性，或其他什麼語言稱之爲「優先級」。你可能會發現Chris Coyier的Specifics on Specificity教程很有幫助。

簡單，更具體的手段更高的優先級：

ul.mylist li.foo { 
    background-color: green; 
}

如果可能的話，應避免!important（有人建議下） - 這是一個黑客工具，手段（隱約）說：「這個規則適用上述任何其他規則」。關於如何合理使用它，請參閱Chris的文章評論。

來源

2010-06-14 13:08:38

使用

li.foo { 
    background-color: green; 
}

來源

2010-06-14 13:09:22 rahul

.myList li.foo {background-color：green！important; }將確保它按預期工作（我認爲）。 – drmonkeyninja 2010-06-14 13:12:06

您可以強制一個特定的風格，加入!important的規則來覆蓋。

.foo { background-color: green!important; }

雖然，意外的驚喜，我不認爲IE6正確地承認它。

來源

2010-06-14 13:09:33 Jeriko

'！important'是一個大錘，它只有兩種狀態（哦，不！我需要重寫某些東西！重要！）。它通常**最好避免。 – Quentin 2010-06-14 13:13:53

我同意。我認爲還會有其他更好的答案，但有時候這只是你需要的:) – Jeriko 2010-06-14 13:19:34

我同意戴維的觀點。此外，IE6確實支持它，只要你不做[古怪的東西]（http://modxcms.com/about/team/rthrash/css-hacking-important.html）就像聲明一個css屬性兩次，但將第一個標記爲！重要。瘋。 – 2010-06-14 13:19:51

-1

不知道我是否正確地遵循這一點，但它聽起來像是您正在將該類添加到列表項中，但該項仍應用「.myList li」樣式，因爲列表元素上沒有類去除。因此原始樣式優先。

來源

2010-06-14 13:10:08 drmonkeyninja

如果我正確地理解你（並且我不確定我是誰），那麼你錯過了正在使用JS添加的類。 – Quentin 2010-06-14 13:15:46

在添加類之前是否未調用removeClass？ – drmonkeyninja 2010-06-14 13:20:17

li本身沒有班級，所以撥打.removeClass()無關。

您可以這樣做

$(item).closest('.myList').removeClass()

而且會刪除整個列表myList中類，但是這可能不是你想要的。

我沒有測試過這一點，但像

li.foo {background-color: green;}

可能做的伎倆，使瀏覽器尊重您的意願FOO。

我建議你讀安迪克拉克的真棒CSS: Specificity Wars充分神交CSS具體

來源

2010-06-14 13:12:59

CSS工作與給予基於點的系統上不同的選擇優先級。具有最多點的選擇器「勝利」並確定元素的樣式。

簡單選擇器（例如對，李，UL，身體，...）：1點
類（例如包含.foo，...）：10分
僞類（例如：懸停，：：focus，：active，...）：10分
ID（eg #wrapper，＃content，#header，...）：100分
style =「...」（例如style = 「color：red」）：1000分

您可以使用屬性「！important」來強制執行t他的優先級最高。請注意，IE 6完全忽略此屬性。

如果即使兩種風格的總和點相等，後面定義的「勝利」也是如此。

來源

2010-06-14 13:14:34

很感謝細節。 – user246114 2010-06-14 13:35:32

用另一個重寫一個css類？

回答

相關問題