我正在整理选择器并测试我的知识,遇到了没有道理的问题。
理论上,下面的代码应将所有li
的所有第一个子级都涂成红色,但是,第一个和第二个子级都涂成红色。
为什么第二个孩子在这里染成红色?
li:first-child{
color: red;
}
<ul>
<li>Peter
<ol>
<li>Juan</li>
<li>Samuel</li>
</ol>
</li>
<li>John
<ol>
<li>Patrick</li>
<li>Spongebob</li>
</ol>
</li>
<li>Sara
<ol>
<li>Jonathan</li>
<li>Kragie</li>
</ol>
</li>
</ul>
答案 0 :(得分:3)
color
是从父元素继承的。...在这种情况下,li:first-child
因此,当您告诉li
为红色时,它是所有子级继承的。
您没有规则为子级覆盖此子项,因此它们会通过继承为着色 /
答案 1 :(得分:2)
发生这种情况是因为颜色是从父元素继承的,请尝试将其添加到CSS中以覆盖它:
li {
color:initial;
}
答案 2 :(得分:0)
这是因为您嵌套了li
。
第二个内部li
被涂成红色,因为它是继承规则,该规则是从应用于第一个子外部li
的样式(即其父元素)开始的。
li:first-child { color: red; }
li:not(:first-child) { color: black; }
这将覆盖继承,并导致第一个外部和内部li
的文本为红色。 Fiddle
或者,如果您只想给内部li
上色:
li li:first-child { color: red; }
答案 3 :(得分:0)
li:first-child选择器还将选择父列表中的第一个li元素。您可以使用直接后代来定位选择器,也可以使用类。
这是首选选项,因为它将自动为您的CSS命名空间。定位子元素时,所有选择器都将以.menu开头。
<ul class="menu">
<li>Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
</ul>
.menu ol li:first-child{
color: red;
}
如果要覆盖菜单样式,则可以在菜单元素上使用额外的类,例如,使用以下选择器将其定位。
.menu.horizontal
此选项具有与第一个选项相同的优点,但是现在.menuItem本身已命名为空。
<ul>
<li class="menuItem">Peter<ol>
<li>Juan</li>
<li>Samuel</li>
</ol></li>
</ul>
.menuItem ol li:first-child{
color: red;
}
ol>li:first-child{
color: red;
}
使用类总是更好,因为如果您在其他地方使用ol元素,那么选择器仍将在那里应用。