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 ：

:first-child CSS伪类表示任何元素其父母的第一个子元素。

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

Answer 2

:first-child伪类选择作为其容器的第一个子元素的元素。 .type-2:first-child不会选择任何内容，因为type-2类的div都不是.section-inner的第一个孩子。不幸的是，CSS Selectors 4级草案中有:nth-match(1)选择器，但当前浏览器都不支持它。

您可以使用以下解决方法：

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

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

Answer 3

您也可以使用nth-child()选择器：

.section-inner div:nth-child(2):before  {
    content:'second element is a div';
}
.section-inner div.type-2:nth-child(2):before  { 
    content:'second element is a div and has class type-2';
}
.section-inner :nth-child(2):before  { 
    content:'any second element';
}

使用first-child和之前的CSS

3 个答案: