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

我有一堆元素的类名称为red ,但是我似乎无法使用以下 CSS 规则选择class="red"的第一个元素:

.red:first-child {
    border: 5px solid red;
}
<p class="red"></p>
<div class="red"></div>

该选择器有什么问题,我该如何纠正?

多亏了这些评论,我才知道该元素必须是其父元素的第一个子元素才能被选中,而事实并非如此。我具有以下结构,并且该规则失败,如注释中所述:

.home .red:first-child {
    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>

我该如何针对red班级的第一个孩子?

答案

/* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}
/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}
<div class="home">
  <span>blah</span>         <!-- [1] -->
  <p class="red">first</p>  <!-- [2] -->
  <p class="red">second</p> <!-- [3] -->
  <p class="red">third</p>  <!-- [3] -->
  <p class="red">fourth</p> <!-- [3] -->
</div>
var first = document.querySelector('.home > .red');
var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
<p class="red"></p>
<div class="red"></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>
<div class="home">
  <span>blah</span>
  <p>dummy</p>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>
<body>
    <p class="red">first</p>
    <div class="red">second</div>
</body>
<div>
    <p class="red">first</p>
    <div class="red">second</div>
</div>
<div>
    <p class="red">third</p>
    <div class="red">fourth</div>
</div>
.red:first-child, :not(.red) + .red { border:5px solid red }

您可以使用first-of-typenth-of-type(1)

.red {
  color: green;  
}

/* .red:nth-of-type(1) */
.red:first-of-type {
  color: 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>

.class:first-of-type { }
<div>
    <span class="red"> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></div> <!-- MATCH -->
</div>

由于其他答案都涵盖了问题所在 ,因此我将尝试另一半,以及如何解决。不幸的是,我不知道您在这里只有 CSS解决方案,至少我没有想到 。不过,还有其他选择。

  1. 生成元素时,将first类分配给元素,如下所示:

    <p class="red first"></p>
    <div class="red"></div>

    CSS:

    .first.red {
      border:5px solid red;
    }

    这个 CSS 只匹配与两个因素firstred类。

  2. 另外,也可以在 JavaScript 中执行相同的操作,例如,这是使用与上述相同的 CSS 来执行此操作的 jQuery:

    $(".red:first").addClass("first");
<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;
    }

我在我的项目中得到了这个。

div > .b ~ .b:not(:first-child) {
	background: none;
}
div > .b {
    background: red;
}
<div>
      <p class="a">The first paragraph.</p>
      <p class="a">The second paragraph.</p>
      <p class="b">The third paragraph.</p>
      <p class="b">The fourth paragraph.</p>
  </div>

您可以使用 nth-of-type(1),但请确保该站点不需要支持 IE7 等,如果是这种情况,请使用 jQuery 添加主体类,然后通过 IE7 主体类查找元素,然后通过元素名称查找,然后添加在第 n 个孩子的样式中。