你可以使用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 >

我的项目里就有这个。

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

为了匹配选择器，元素的类名必须为红色，并且必须是其父元素的第一个子元素。

<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:3px solid green;
    }

这里有一个来自SnoopCode的CSS参考。

我想很多人已经解释过了。您的代码只选择了第一个实例的第一个子对象。如果你想选择红色类的所有第一个子类，你需要使用

.home > .red:first-child {
    /* put your styling here */
}

根据你更新的问题

<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