我有一堆元素的类名红色,但我似乎不能选择class="red"使用以下CSS规则的第一个元素:

.home .red:第一个孩子{ 边框:1px纯红色; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

这个选择器出了什么问题,我如何纠正它,以类红色为目标的第一个孩子?


当前回答

我很惊讶没有人提到最干净的解决方案:

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>

试试这个解决方案:

.home p:first-of-type { 边框:5px纯红色; 宽度:100%; 显示:块; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

CodePen链接

你可以使用first-of-type或n -of-type(1)

r { 颜色:绿色; } /* .red:n -of-type(1) */ r: first-of-type { 颜色:红色; } < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

你可以使用n -of-type(1),但要确定网站不需要支持IE7等,如果是这种情况,使用jQuery添加主体类,然后通过IE7主体类找到元素,然后元素名称,然后添加第n个子样式。

根据你更新的问题

<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