具有类的第一个元素的CSS选择器

我有一堆元素的类名为

red

，但我似乎无法使用以下CSS规则选择第一个元素的类名为

class=“red”

：

.home.red：第一个孩子{
边框：1px纯红；
}

废话
首先
秒
第三

第四

如名称所示，

:first child

选择器用于选择父标记的第一个子标记。因此，此示例将起作用（只需尝试）：

首先
第二

但是，如果您将标记嵌套在不同的父标记下，或者如果您的class

red

标记不是父标记下的第一个标记，那么这将不起作用

还要注意，这不仅适用于整个文档中的第一个这样的标记，而且每次都有一个新的父标记围绕它，如：

首先
第二
第三

第四

第一个

和

第三个

随后将为红色

对于您的情况，您可以使用类型的第n个选择器：

.red:nth类型（1）
{
边框：5px纯红；
}

废话
首先
秒
第三

第四

要与选择器匹配，元素必须具有

红色的类名，并且必须是其父元素的第一个子元素


废话

废话

既然其他答案涵盖了它的问题所在，我将尝试另一半，即如何修复它。不幸的是，我不知道你这里有一个CSS-only解决方案，至少我想不出来。不过，还有其他一些选择

生成元素时，将
第一个
类指定给该元素，如下所示：

.red:first-of-type {
    border: 5px solid red;
}



CSS:

.first.red{
边框：5px纯红；
}

此CSS仅匹配具有两个
第一类
和
红色
类的元素

或者，也可以在JavaScript中执行相同的操作，例如，使用与上面相同的CSS，jQuery可以执行以下操作：

$(".red:first").addClass("first");


这是作者误解第一个孩子如何工作的最著名的例子之一，
：first child
伪类表示父类的第一个子类。就这样。有一个非常常见的误解，即它会选择第一个匹配复合选择器其余部分指定的条件的子元素。由于选择器的工作方式（请参阅以获取解释），这根本不是事实

，表示其元素类型的同级元素中的第一个元素。用插图说明
：第一个孩子
和
：第一个类型
之间的区别。但是，与
：first child
一样，它不查看任何其他条件或属性。在HTML中，元素类型由标记名表示。在问题中，该类型是
p

不幸的是，没有类似的
：类的第一个
伪类来匹配给定类的第一个子元素。当这个答案第一次发布时，它是围绕现有的选择器机制设计的，正如我在第一段中提到的，通过添加选择器列表参数，您可以提供复合选择器的其余部分，以获得所需的过滤行为。近年来，随着选择器列表作为可选的第二个参数出现，该功能被用来简化事情，并避免在整个文档中出现
：nth-match（）
匹配的错误印象（参见下面的最后一个注释）

在我们等待的时候（说真的，这已经将近10年了，在过去的5年里只有一个实现），我和她独立开发的一个解决方案（她先开发！）是首先将您想要的样式应用到该类的所有元素：

/*
*选择.home的所有.red子项，包括第一个，
*给他们一个边界。
*/
.home>.red{
边框：1px纯红；
}

。。。然后在覆盖规则中使用“撤消”第一个类之后的类的元素的样式：

/*
*选择除.home的第一个.red子项以外的所有项，
*并从上一个规则中删除边框。
*/
.home>.red~.red{
边界：无；
}

现在，只有带有
class=“red”
的第一个元素将有边框

以下是如何应用规则的示例：


.home>.red{
边框：1px纯红；
}
.home>.red~.red{
边界：无；
}

废话
首先
秒
第三个
第四
正确答案是：

.red:first-child, :not(.red) + .red { border:5px solid red }

第一部分：如果元素是其父元素的第一个元素，并且具有“红色”类，则应获得边框。

第二部分：如果“.red”元素不是它的父元素的第一个，而是紧跟在一个没有等级“.red”元素之后，那么它也应该获得上述边界的荣誉


Philip Daubmeier的回答虽然被接受，但并不正确-见附件fiddle。

BoltClock的答案是可行的，但不必要地定义和覆盖了样式

（特别是一个问题，否则它将继承一个不同的边界-您不想向边界声明other:none）

编辑：
如果“红色”多次跟随非红色，则每个“第一”红色将获得边界。为了防止这种情况发生，我们需要使用博尔特钟的答案。请参见
您可以使用第n种类型（1），但请确保站点不需要支持IE7等，如果是这种情况，请使用jQuery添加body类，然后通过IE7 body类查找元素，然后查找元素名称，然后
.home span + .red{
      border:1px solid red;
    }

<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;
    }

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

 .home > span + .red{
      border:1px solid red;
    }

.class:first-of-type { }

.home p:first-of-type

.red:first-of-type {
    border: 5px solid red;
}

.red:last-of-type {
    border: 5px solid red;
}

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