CSS选择非递归li's Only

如何从此示例列表中只选择顶层li？CSS选择非递归li's Only

<ul class='upper'> 
    <li class="first">dog</li> 
    <li>cat</li> 
    <li>bird</li> 
    <li>mouse</li> 
    <li> 
    <ul class="lower"> 
     <li>chow</li> 
     <li>nibz</li> 
     <li>seed</li> 
     <li>cheese</li> 
    </ul> 
    </li> 


ul.upper > li { 
    color:red; 
}

这种样式所有李的我明白，因为递归UL是在第一级列表项内。有没有一种简单的方式来只设计顶级li的样式？也许用某种方式使用“：not”？

编辑：我意识到你可以覆盖下面的样式使用颜色：初始或通过添加另一种颜色（和其他方式），但我想知道是否有一种方法来只选择顶级李的很好，所以另一种风格是不需要。

来源

2016-03-08 Judd Cobler

只需添加'li {color：initial; }'其他规则 –

'：not（）'绝对不会帮助你，因为它只需要简单的选择器而不需要组合器。 –

解决您的编辑问题：不，因为您的.lower li's也是您的.upper li's。大多数样式都是继承的。你为父母着色，所以孩子默认会被着色。 – Nate

你希望孩子组合子， “>”

.upper > li

来源

2016-03-08 00:40:54

TS已经在这个问题中有这个。 –

不起作用。尝试一下！ –

所以，你li都继承了祖先的颜色，所以你需要添加color:initial，或color:black来覆盖

ul.upper > li { 
 
    color: red; 
 
} 
 
li { 
 
    color: initial; 
 
}

<ul class='upper'> 
 
    <li class="first">dog</li> 
 
    <li>cat</li> 
 
    <li>bird</li> 
 
    <li>mouse</li> 
 
    <li> 
 
    <ul class="lower"> 
 
     <li>chow</li> 
 
     <li>nibz</li> 
 
     <li>seed</li> 
 
     <li>cheese</li> 
 
    </ul> 
 
    </li>

来源

2016-03-08 00:48:51

在我之前忍者，更完整，更清洁...猜猜我会删除我的，并回这一哈哈 – abluejelly

你可以像这样定义深度嵌套的UL列表项：

ul > li { 
    color:red; 
} 

ul ul > li { 
    color: #000; 
}

因此，这可以在整个页面的工作，以确定任何最高级别列表项与第二级列表项，不分阶级的名字。 “UL UL”在CSS中的意思是“UL那是另一UL内部”

工作例如：https://jsfiddle.net/2Lyvp2bm/2

（？我是全新的，我怎么添加一段代码，我的回答）

来源

2016-03-08 00:53:20 annieXo

CSS选择非递归li's Only

回答

相关问题