我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
这个选择器出了什么问题，我如何纠正它，以类红色为目标的第一个孩子?
当前回答
正确答案是:
.red:first-child, :not(.red) + .red { border:5px solid red }
第一部分:如果元素是父元素的第一个，并且类为“red”，它将得到border。 第二部分:If "。红色“元素不是其父元素的第一个，而是紧跟着一个没有类的元素”。红色”，它也应该配得上说边界的荣誉。
不然就是没发生。
菲利普·多布梅尔的回答，虽然被接受，但并不正确-见附件小提琴。 BoltClock的答案可以工作，但不必要地定义和覆盖样式 (特别是一个问题，否则它将继承一个不同的边界-你不想声明other to border:none)
编辑: 如果你有“红色”后面的非红色几次，每个“第一个”红色将得到边界。为了防止这种情况，我们需要使用BoltClock的答案。看到小提琴
其他回答
由于其他答案涵盖了它的问题，我将尝试另一半，如何解决它。不幸的是，我不知道你有一个CSS唯一的解决方案，至少不是我能想到的。还有一些其他的选择....
在生成元素时给元素赋一个first类，如下所示: <p class="red first"></p> . < div class = "红色" > < / div > CSS: 当代。红色{ 边框:5px纯红色; ｝ 这个CSS只匹配第一个类和红色类的元素。 或者，在JavaScript中做同样的事情，例如这里是你会使用jQuery来做这件事，使用与上面相同的CSS: $ (r:首先).addClass(“第一”);
您可以将代码更改为这样的内容以使其工作
<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:3px solid green;
}
这里有一个来自SnoopCode的CSS参考。
顾名思义，: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。
以上答案太复杂了。
.class:first-of-type { }
这将选择第一种类型的类。MDN源
注:2021年6月在Chrome 91和Firefox 89上测试。
下面的代码肯定在任何地方都能正常工作。 它简单而简短。
<div class="home">
<span>blah</span>
<p class="blue"> first-blue </p>
<p class="blue"> second-blue </p>
<p class="blue"> third-blue </p>
<p class="red"> first-red </p>
<p class="red"> second-red </p>
<p class="red"> third-red </p>
<p class="red"> fourth-red </p>
<p class="pink"> first-pink </p>
<p class="pink"> second-pink </p>
<p class="red"> new-first-red </p>
<p class="red"> new-second-red </p>
</div>
我们可以选择第一个红色:
.home .red:not(.home .red ~ .red) {
background-color: blue;
}
如果你想选择new-first-red，你应该使用+而不是~。
