面对一个奇怪的问题
对于 HTML:
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li class="has-item">four</li>
<li>five</li>
</ul>
此有效:
ul li:first-child {
font-size:30px
}
但为什么
ul li.has-item:first-child {
font-size:8px
}
答案 0 :(得分:1)
与所有其他:first-child
相关的伪类一样,:nth-child()
伪类计算所有兄弟节点(即具有相同父节点的元素)。类被忽略,因为它们与DOM结构无关。
所以:first-child
永远是第一个兄弟。
此...
ul li.has-item:first-child {
font-size:8px
}
不起作用,因为.has-item
并不代表:first-child
的任何内容。第一个孩子将永远是<li>one</li>
。