Целевые элементы списка в первичной ul, но не вложенные ul

Question

Мне нужно добавить стили css в родительский список.

У меня есть один из родителей ul и дети. Я хочу, чтобы применить цвет к фруктов, овощи и цветы но не Apple,, Banana, Orange.

Я хочу сделать это с помощью селектора 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>

Answer 1

Вы можете просто добавить класс к родителю ul, а затем использовать прямой селектор потомка таргетинг только те li элементы.

Это, безусловно, будет изменять цвета для Apple, или Orange, но тогда вы можете сбросить цвет на суб 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>

Answer 2

использования, как это ...

<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>

Answer 3

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>

Answer 4

<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>