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

来源

2016-06-08 user3386779

您将应用于这些元素的准确风格是什么？ 'color'是一个继承的属性，所以一旦你将它分配给外部'li'，它里面的'ul'和'li'将继承这个颜色。你不得不超越它。 – Harry

你可以一类简单地添加到父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>

来源

2016-06-08 04:35:36

使用这样的...

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

来源

2016-06-08 04:37:56 Mani

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>

来源

2016-06-08 04:41:50

-2

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

来源

2016-06-08 05:10:24 SMS

在主ul中但不嵌套的目标列表项ul

回答

相关问题