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

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

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

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

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

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

您可以将代码更改为这样的内容以使其工作

<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参考。

试试这个解决方案:

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

CodePen链接

我的项目里就有这个。

Div > .b ~ .b:not(:第一个孩子){ 背景:无; ｝ Div > .b { 背景:红色; ｝ < div > <p class="a">第一段 <p class="a">第二段 <p class="b">第三段 <p class="b">第四段 < / div >