我有一堆元素的类名红色，但我似乎不能选择class="red"使用以下CSS规则的第一个元素:
.home .red:第一个孩子{ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
这个选择器出了什么问题，我如何纠正它，以类红色为目标的第一个孩子?
当前回答
一个快速的脏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>
其他回答
试试这个简单有效的方法
.home > span + .red{
border:1px solid red;
}
我很惊讶没有人提到最干净的解决方案:
r:没有。红色~ .红色){ 边框:1px纯红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >
一个快速的脏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>
根据你更新的问题
<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
为了匹配选择器，元素的类名必须为红色，并且必须是其父元素的第一个子元素。
<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>
