我试图将样式仅应用于元素的第一个子元素。我在 css 中使用 :first-child 来实现这一点,但看起来这不是我要寻找的行为。
以下面的标记为例:
<ul class="myUl">
<ul class="mySubUl">
<li>foo0</li>
<li>foo1</li>
</ul>
<ul class="mySubUl">
<li>foo2</li>
<li>foo3</li>
</ul>
</ul>
======================
<ul class="myUl">
<li>foo0</li>
<li>foo1</li>
<ul class="mySubUl">
<li>foo2</li>
<li>foo3</li>
</ul>
</ul>
和这个简单的 CSS:
ul.myUl li:first-child {
color: red;
}
现场 fiddle :http://jsfiddle.net/bsSDh/1/
这不仅适用于 ul.myUl
元素的第一个子元素,也适用于 ul.subUl
元素的第一个子元素。如果 CSS 选择器是 ul li:first-child
(有效),我会预料到这种行为,但由于我正在向选择器添加一个类,所以我希望将该样式仅应用于第一个 child 。
为什么样式不仅适用于第一个 child ?我是否遗漏了有关 first-child
规范的内容或以错误的方式使用了选择器?
最佳答案
我想你还需要一个 child selector像这样的元素:
ul.myUl > li:first-child {
color: red;
}
您的选择器选择任何 <li>
下面ul.myUL
,那是第一个 child 。由于这仅引用直接父级而不是任何其他祖先,因此所有其他 <li>
也匹配。
编辑
在您发表评论之后,我认为您将需要一个更复杂的选择器,如下所示:
ul.myUl > li:first-child,
ul.myUl > ul:first-child > li:first-child {
color: red;
}
关于css - :first-child selector selects more than one children,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18963624/