Css選擇器問題 - 孩子和父母？

Question

我想知道如何在我的例子中只選擇頂級「巨型父母」？

<li class="page_item parent"><a href="#"> Mega Parent</a> 
     <ul class="children"> 
      <li class="page_item parent"><a href="#">Subparent</a> 
       <ul class="children"> 
        <li class="page_item"><a href="#">Child</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 

我只想要我的頂級父母項目「Mega Parent」有例如紅色。 解決此問題的最佳方法是什麼？

Answer 1

你可以使用這樣的事情：

.page_item.parent > a { color: red; } 
.page_item.parent li > a { color: inherit; } 

或者你可以添加一個額外的類到您megaparent的元素，它設置了一個附加的風格。

Answer 2

CSS對某些值使用繼承，您可能會在後代手動設置color來否定繼承。

在這裏看到一個解釋：

http://dorward.me.uk/www/css/inheritance/

Answer 3

這應該在定義類時解決，而不是在解決它們時解決。但是，如果你不能定義它們，我只是去選擇不同的嵌套一個覆蓋你所有元素應用

.page_item.parent a{ color:red; } 

.page_item.parent ul.children .page_item.parent{ color:black;} 

或任何其他類型的默認樣式的默認，你也可以只追加第二個選擇器的其他定義。