CSS：不是選擇器

我正在嘗試使用CSS3 :not選擇器。基本上，我有一個表，當你將鼠標懸停一排，背景顏色的變化：CSS：不是選擇器

.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { 
    background-color: #272727; 
}

在<tr>的之一，我應用latest-review類行。當我將鼠標懸停在latest-review行上時，由於上面的CSS，背景色仍然會改變。我希望不要改變顏色。我試過了，失敗了：

.table-hover tbody tr:hover > td:not(.latest-review), .table-hover tbody tr:hover > th:not(.latest-review) { 
    background-color: #272727; 
}

我不太確定還有什麼其他的嘗試在這一點上。我目前使用的是Chrome，我並不擔心舊版瀏覽器不支持:not選擇器。

來源

2013-04-29 Ronnie

你爲什麼不嘗試反向邏輯 - 應用類。不，最新的審查，以所有可以突出顯示的內容，然後在不想突出顯示的情況下刪除該類。 – cirrus 2013-04-29 21:44:05

好了，你寫的.latest-review應用於<tr>，但你的代碼段使用<td>和<th>。無論哪種方式，它更容易恕我直言，你的懸停規則後，只需添加一個簡單的第二條規則（而不是使用:not）：

.table-hover tr:hover { 
    background-color: #272727; 
} 

.table-hover .latest-review { 
    background-color: %original_color% 
}

來源

2013-04-29 21:45:20 nietonfir

我更喜歡使用'：not（）'，因爲它適用於所有瀏覽器。 – jfriend00 2013-04-29 21:50:08

我會這樣做。事情是我使用Twitter Bootstrap作爲我的基礎CSS。對我使用過的第一個項目進行了排序，我發現很難重寫某些內容，除非命名了bootstrap標籤。我刪除了表格懸停的引導版本，而我正在使用此方法，謝謝 – Ronnie 2013-04-29 21:59:19

@Ronnie：您可以始終通過更具體的方式覆蓋CSS聲明。這意味着您可以簡單地編寫'.table-hover td.tm.latest-review：hover> td，.table-hover tbody tr.lateste-review：hover> th'來確保它被覆蓋。我會這樣做，而不是改變默認值。 – nietonfir 2013-04-29 22:05:05

第一個CSS規則將覆蓋第二個。要麼刪除第一個或重置顏色：

.table-hover tbody tr:hover > td.latest-review, .table-hover tbody tr:hover > th.latest-review { 
    background-color: default-color; 
}

來源

2013-04-29 21:43:34 Blender

CSS：不是選擇器

回答

相關問題