我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
这个选择器出了什么问题，我如何纠正它，以类红色为目标的第一个孩子?
当前回答
以上答案太复杂了。
.class:first-of-type { }
这将选择第一种类型的类。MDN源
注:2021年6月在Chrome 91和Firefox 89上测试。
其他回答
我想很多人已经解释过了。您的代码只选择了第一个实例的第一个子对象。如果你想选择红色类的所有第一个子类，你需要使用
.home > .red:first-child {
/* put your styling here */
}
为了匹配选择器，元素的类名必须为红色，并且必须是其父元素的第一个子元素。
<div>
<span class="red"></span> <!-- MATCH -->
</div>
<div>
<span>Blah</span>
<p class="red"></p> <!-- NO MATCH -->
</div>
<div>
<span>Blah</span>
<div><p class="red"></p></div> <!-- MATCH -->
</div>
根据你更新的问题
<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
正确答案是:
.red:first-child, :not(.red) + .red { border:5px solid red }
第一部分:如果元素是父元素的第一个，并且类为“red”，它将得到border。 第二部分:If "。红色“元素不是其父元素的第一个，而是紧跟着一个没有类的元素”。红色”，它也应该配得上说边界的荣誉。
不然就是没发生。
菲利普·多布梅尔的回答，虽然被接受，但并不正确-见附件小提琴。 BoltClock的答案可以工作，但不必要地定义和覆盖样式 (特别是一个问题，否则它将继承一个不同的边界-你不想声明other to border:none)
编辑: 如果你有“红色”后面的非红色几次，每个“第一个”红色将得到边界。为了防止这种情况，我们需要使用BoltClock的答案。看到小提琴
一个快速的脏jQuery解决方案，用于标记具有相同类名的一组元素中的第一个和最后一个元素:
$('.my-selector').each(function(index, item) { if (!$(item).next().hasClass('my-selector')) { $(item).addClass('last'); } if (!$(item).prev().hasClass('my-selector')) { $(item).addClass('first'); } }); .my-selector { padding: 5px; background: #ccc; } .my-selector.first { background: #fcc; } .my-selector.last { background: #cfc; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span>first element...</span> <div class="my-selector">Row 1</div> <div class="my-selector">Row 2</div> <div class="my-selector">Row 3</div> <div class="my-selector">Row 4</div> <span>other elements...</span> <div class="my-selector">Row 3</div> <div class="my-selector">Row 4</div> </div>
