首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用第一个子级和之前的CSS

使用第一个子级和之前的CSS
EN

Stack Overflow用户
提问于 2014-03-16 11:32:04
回答 2查看 7.1K关注 0票数 2

我有如下的div结构

代码语言:javascript
运行
复制
<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>

我想在文本“子内容1”之前添加一些内容,我在下面使用CSS。

代码语言:javascript
运行
复制
.section-outer .section-inner > div.type-2:first-child:before {
  content: "SOME CONTENT";
}

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-16 11:46:02

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

您可以使用这样的解决方案:

代码语言:javascript
运行
复制
.section-outer .section-inner > div.type-2:before {
  content: "SOME CONTENT";
}

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

Stack Overflow用户

发布于 2014-03-16 11:43:40

这是因为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列表。

在这个特定的实例中,您可以使用邻接同胞选择器 +来选择第一个div.type-2,如下所示:

这里的例子

代码语言:javascript
运行
复制
.section-inner > div.type-1 + div.type-2:before {
  content: "SOME CONTENT";
}

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

上述假设假设.type-1.type-2不经常重复。如果不是这样,您可以使用普通同胞选择器 ~来覆盖content属性,如下所示:

这里的例子

代码语言:javascript
运行
复制
.section-inner > div.type-2 ~ div.type-2:before {
  content: none;
}

值得注意的是,相邻/普通同胞选择器被支持 IE7+

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22436274

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档