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>＃test1的：第一，孩子是好的，但UL>＃TEST4：第一 - 小孩不工作

Demo 问题在哪里？

Answer 1

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

二:first-child只会匹配的第一个子元素而与用于子元素任何其他选择，所以在你的情况下，第一＃test1的将是唯一的元素匹配ul > :first-child选择器

我不认为有一个只有CSS的解决方案。

相反ID使用class属性，然后使用jQuery中的:first-selector像

.someclass{ 
    //some rule 
} 

然后

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

Answer 2

它不工作，因为你正在寻找的<ul>元素的:first-child其中有一个名为test4的ID。你想要的是第一个编号为test4的元素，我认为这对于纯CSS来说是不可能的。

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