由于其他答案涵盖了它的问题，我将尝试另一半，如何解决它。不幸的是，我不知道你有一个CSS唯一的解决方案，至少不是我能想到的。还有一些其他的选择....

在生成元素时给元素赋一个first类，如下所示: <p class="red first"></p> . < div class = "红色" > < / div > CSS: 当代。红色{ 边框:5px纯红色; ｝ 这个CSS只匹配第一个类和红色类的元素。 或者，在JavaScript中做同样的事情，例如这里是你会使用jQuery来做这件事，使用与上面相同的CSS: $ (r:首先).addClass(“第一”);

正确答案是:

.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>

根据你更新的问题

<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

总之，在阅读了这所有的页面和其他的以及大量的文档之后。总结如下:

对于第一个/最后一个子代:现在可以安全使用(所有现代浏览器都支持) :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>

出于某种原因，上述答案似乎都没有解决父母真正的第一个和唯一的第一个孩子的情况。

#element_id > .class_name:first-child

如果您只想将样式应用于此代码中的第一个子类，那么以上所有答案都将失败。

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>