css发现第一个孩子给出了错误的结果

Question

我有：

<ul>
<li id="test1">The third paragraph.</li>
<li id="test1">The fourth paragraph.</li>
<li id="test2">The second paragraph.</li>
<li id="test2">The third paragraph.</li>
<li id="test2">The fourth paragraph.</li>
<li id="test3">The second paragraph.</li>
<li id="test3">The third paragraph.</li>
<li id="test4">The fourth paragraph.</li>
<li id="test4">The fourth paragraph.</li>
<li id="test7">The fourth paragraph.</li>
<li id="test7">The fourth paragraph.</li>
</ul>

和css代码：

ul > #test4:first-child
{
background:#ff0000;
}

此代码ul＆gt; #test1：第一个孩子很好但是ul＆gt; #test4：第一个孩子不工作

Demo 问题出在哪里？

Answer 1

首先，元素的ID必须是唯一的，

第二个:first-child将仅匹配第一个子元素，而不考虑用于子元素的任何其他选择器，因此在您的情况下，第一个＃test1将是ul > :first-child选择器匹配的唯一元素

我认为没有css解决方案。

而不是ID使用类属性，然后在jQuery中使用:first-selector，如

.someclass{
    //some rule
}

然后

$('ul > .test4:first').addClass('someclass')

Answer 2

它不起作用，因为您正在寻找:first-child个<ul>元素，其ID为test4。你想要的是id test4的第一个元素，我认为纯CSS不可能。

此外，您最好使用类而不是ID，因为您不应在HTML元素中重复ID。