使用 first-child 及之前的 CSS

Question

我的div结构如下

<div class="section-outer"> 
  <div class="section-inner">
      <div class="type-1"> Hi </div>
      <div class="type-2">sub contents 1</div>              
      <div class="type-2">sub contents 2</div>
  </div>
</div>

我想在文本“sub content 1”之前添加一些内容，为此我在 CSS 下使用。

.section-outer .section-inner > div.type-2:first-child:before {
  content: "SOME CONTENT";
}

但是上面的 css 选择器没有选择任何 div。谁能帮帮我。

Answer 1

那是因为div.type-2 不是其父项(.section-inner 元素)的第一个子项。

来自 MDN :

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

selector:first-child 表示其父元素与 selector 匹配的第一个子元素，在你的例子中是 .section-inner 的第一个子元素是div.type-1不是div.type-2 .

换句话说，:first-child伪类查看父级的子树以选择第一个子级，而不是通过 element.class 的列表。 .

---

在此特定实例中，您可以使用 adjacent sibling selector +为了选择第一个div.type-2如下:

Example Here .

.section-inner > div.type-1 + div.type-2:before {
  content: "SOME CONTENT";
}

div.type-1 + div.type-2选择器将选择 div.type-2紧跟在 div.type-1 之后的元素.

---

以上假定.type-1和 .type-2不经常重复。如果不是这种情况，您可以使用 general sibling selector ~为了覆盖 content属性如下:

Example Here .

.section-inner > div.type-2 ~ div.type-2:before {
  content: none;
}

值得注意的是，相邻/一般兄弟选择器 are supported in IE7+ .