使用第一个子代和之前的CSS

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

---

但是上面的css选择器没有选择任何div。任何人都可以帮助我。

这是因为

div.type-2

不是其父元素的第一个子元素（

.section-inner

元素）

从：

：第一个子CSS伪类表示作为
其父元素的第一个子元素

表示与
选择器
匹配的其父元素的第一个子元素，在本例中，
.section内部
的第一个子元素是
div.type-1
而不是
div.type-2

换句话说，
：first child
伪类通过父级的子级树来选择第一个子级，而不是通过
元素的列表。class


在此特定情况下，您可以使用
+
选择第一个
div.type-2
，如下所示：


.section-inner>div.type-1+div.type-2:之前{
内容：“一些内容”；
}

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


以上假设
.type-1
和
.type-2
不经常重复。如果不是这样，您可以使用
~
来覆盖
内容
属性，如下所示：


.section inner>div.type-2~div.type-2:之前{
内容：无；
}

值得注意的是，相邻/通用同级选择器。
：第一个子
伪类选择作为其容器第一个子元素的元素
.type-2:first child
不选择任何内容，因为
type-2
类的div都不是
.section inner
的第一个子类。CSS选择器第4级草稿中有
：n个匹配（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;
}

您也可以使用
nth-child（）
选择器：

div.type-2不是第一个孩子。这就是您的选择器不工作的原因。
.section-outer .section-inner > div.type-2:before {
  content: "SOME CONTENT";
}

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

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