css3：not（）選擇器測試父類

我有一個無序列表，使用bootstraps「tabs」插件。代碼如下所示：css3：not（）選擇器測試父類

<ul> 
    <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li> 
    <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li> 
    <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li> 
    <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li> 
</ul>

我想使用CSS3改變所有的<a>鏈接的父<li>不具有類.active的顏色。

我已經試過這樣的事情：

a:not(li.active>a){ 
    color:grey; 
}

，但無濟於事。有沒有辦法做到這一點，或我吠叫錯誤的樹？

來源

2013-01-10 Jascination

當前CSS沒有「父」seletor（儘管CSS4顯然會有這種能力），所以你可能想要尋找另一個解決方案 –

那麼這只是煩人的！我想我可以應用一種特殊的風格來覆蓋常規的'a'風格，但我更喜歡如果我能找到父類。好吧！ – Jascination

@Explosion Pills：這裏的代碼不是試圖選擇父代;它試圖根據父匹配（或不匹配）選擇一個孩子。這不能用父母選擇器來解決。 – BoltClock

組合器如>,+和後代空間不允許在:not()在CSS中;他們只被允許作爲jQuery選擇器。你可以在this other question找到更多。

也就是說，您可以在li上單獨使用:not()，然後移出> a部分;然而，這將取決於你的ul和li元素的結構：

li:not(.active) > a { 
    color: grey; 
}

例如，你可以隨時連接其他的選擇，比如.span3，如果你想將它與li父母類的限制a元素只：

li.span3:not(.active) > a { 
    color: grey; 
}

請記住，雖然，你只能靠這種方式使用:not()，如果你有控制權的標記或結構至少可預見的（例如，你知道父母是什麼樣的元素）。舉例來說，你只看li.span3 > a，並且只在li.span3沒有活動類時才應用樣式。有了這些信息，你可以構建一個像上面的選擇器，其中應該按預期工作。

來源

2013-01-10 05:59:51 BoltClock

css3：not（）選擇器測試父類

回答

相關問題