我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
这个选择器出了什么问题，我如何纠正它，以类红色为目标的第一个孩子?
当前回答
顾名思义，:first-child选择器用于选择父标记的第一个子标记。所以这个例子将工作(刚刚尝试在这里):
<body>
<p class="red">first</p>
<div class="red">second</div>
</body>
但是，如果您将标记嵌套在不同的父标记下，或者类为red的标记不是父标记下的第一个标记，则这将不起作用。
还要注意，这不仅适用于整个文档中的第一个这样的标记，而且适用于每次在它周围包装一个新的父标签，例如:
<div>
<p class="red">first</p>
<div class="red">second</div>
</div>
<div>
<p class="red">third</p>
<div class="red">fourth</div>
</div>
第一个和第三个将是红色的。
对于你的情况，你可以使用:n -of-type选择器:
r: nth-of-type (1) ｛ 边框:5px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
归功于Martyn，他删除了包含这种方法的答案。
有关:n -child()和:n -of-type()的更多信息，请访问http://www.quirksmode.org/css/nthchild.html。
请注意，这是一个CSS3选择器，因此一些过时的浏览器版本可能无法正常运行(例如IE8或更老版本)。详情请访问https://caniuse.com/?search=nth-of-type。
其他回答
总之，在阅读了这所有的页面和其他的以及大量的文档之后。总结如下:
对于第一个/最后一个子代:现在可以安全使用(所有现代浏览器都支持) :n -child()现在也可以安全使用(所有现代浏览器都支持)。但要小心，它甚至计算兄弟姐妹!因此，下面的代码将无法正常工作:
/*选择display_class类的前2个元素 *但这行不通，因为第n个孩子甚至算兄弟姐妹 *包括第一个div skip_class * / .display_class: nth-child (n + 2) { 背景颜色:绿色; ｝ < ul > <li class="skip_class">test 1</li> <li class="display_class">test 2应为绿色</li> <li class="display_class">test 3应为绿色</li> <li class="display_class">test 4</li> < / ul >
目前，有一个选择器:n -child(-n+2 of .foo)，它支持按类选择，但现代浏览器不支持，所以没有用。
所以，这给我们留下了Javascript解决方案(我们将修复上面的例子):
// Here we'll go through the elements with the targeted class // and add our classmodifer to only the first 2 elements! [...document.querySelectorAll('.display_class')].forEach((element,index) => { if (index < 2) element.classList.add('display_class--green'); }); .display_class--green { background-color:green; } <ul> <li class="skip_class">test 1</li> <li class="display_class">test 2 should be in green</li> <li class="display_class">test 3 should be in green</li> <li class="display_class">test 4</li> </ul>
顾名思义，:first-child选择器用于选择父标记的第一个子标记。所以这个例子将工作(刚刚尝试在这里):
<body>
<p class="red">first</p>
<div class="red">second</div>
</body>
但是，如果您将标记嵌套在不同的父标记下，或者类为red的标记不是父标记下的第一个标记，则这将不起作用。
还要注意，这不仅适用于整个文档中的第一个这样的标记，而且适用于每次在它周围包装一个新的父标签，例如:
<div>
<p class="red">first</p>
<div class="red">second</div>
</div>
<div>
<p class="red">third</p>
<div class="red">fourth</div>
</div>
第一个和第三个将是红色的。
对于你的情况，你可以使用:n -of-type选择器:
r: nth-of-type (1) ｛ 边框:5px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
归功于Martyn，他删除了包含这种方法的答案。
有关:n -child()和:n -of-type()的更多信息，请访问http://www.quirksmode.org/css/nthchild.html。
请注意，这是一个CSS3选择器，因此一些过时的浏览器版本可能无法正常运行(例如IE8或更老版本)。详情请访问https://caniuse.com/?search=nth-of-type。
根据你更新的问题
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
如何
.home span + .red{
border:1px solid red;
}
这将选择类home，然后是元素span，最后是所有紧接在span元素之后的。red元素。
参考:http://www.w3schools.com/cssref/css_selectors.asp
我很惊讶没有人提到最干净的解决方案:
r:没有。红色~ .红色){ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
我想很多人已经解释过了。您的代码只选择了第一个实例的第一个子对象。如果你想选择红色类的所有第一个子类，你需要使用
.home > .red:first-child {
/* put your styling here */
}
