我需要將CSS樣式添加到父列表中。在主ul中但不嵌套的目標列表項ul
我有一個家長ul和孩子。我想申請顏色水果，蔬菜和花但不蘋果，香蕉，橙。
我想使用CSS選擇器來做到這一點。
ul:root>li {
color: red;
}<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>你可以一類簡單地添加到父ul然後用嫡系選擇的目標只有那些li項目。
這是肯定會改變顏色蘋果或橙色但你可以重置子ul指定的顏色。
這是您的更新演示。
.parent-list > li {
color: red;
}
.parent-list > li ul {
color: initial;
}<ul class="parent-list">
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>使用這樣的...
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>
\t \t \t \t \t \t \t
<style>
ul li{
color: red;
}
ul li li{
color: black;
}
</style>ul > li { /* select list items that are children of a ul */
color: red;
}
ul ul li { /* select list items that are descendants of a ul, itself... */
color: black; /* ...a descendant of another ul */
}<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul><style>
ul li {
color: red;
}
ul ul li {
color: black;
}
</ul>
</style>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
您將應用於這些元素的準確風格是什麼？ 'color'是一個繼承的屬性，所以一旦你將它分配給外部'li'，它裏面的'ul'和'li'將繼承這個顏色。你不得不超越它。 – Harry