是否只有第一个直接孩子的CSS选择器？

Question

我有以下HTML

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

以下风格:

DIV.section DIV:first-child 
{
  ...
}

由于某些原因,我不明白风格是应用于"子内容1" <div>以及"标题" <div>.

我认为样式上的选择器只适用于具有名为"section"的类的div的第一个直接子节点.如何更改选择器以获得我想要的？

Answer 1

你在字面上发布的意思是"查找div中的任何div,并且是他们父母的第一个孩子." 子包含一个与该描述匹配的标记.

我不清楚你是否想要主要div的两个孩子.如果是这样,请使用:

div.section > div

如果您只想要标题,请使用:

div.section > div:first-child

使用>更改描述:"查找任何div是div节的直接后代",这是你想要的.

请注意,除IE6外,所有主流浏览器都支持此方法.如果IE6支持是关键任务,则必须向子div添加类并使用它.否则,不值得关心.

Answer 2

CSS称为层叠样式表,因为规则是继承的.使用下面的选择,将只选择父母的直接孩子,但它的规则将被继承由div的孩子divs:

div.section > div { color: red }

现在,这个div 和它的孩子都会red.如果您不希望它继承,您需要取消在父级上设置的任何内容:

div.section > div { color: red }
div.section > div div { color: black }

现在只有那个div直接的孩子div.section才会是红色的,但它的孩子divs仍然是黑色的.

Answer 3

在Google上搜索此问题.这将返回带有类的元素的第一个子元素container,而不管子元素的类型.

.container > *:first-child
{
}

Answer 4

在您的情况下，直接第一个孩子的 CSS 选择器是：

.section > :first-child

直接选择器是 > 而第一个子选择器是 :first-child

正如其他人所建议的那样，在 : 之前不需要星号。您可以通过添加标签来修改此解决方案来加速 DOM 搜索：

div.section > :first-child

Answer 5

div.section > div

Answer 6

使用div.section > div.

更好的是,<h1>在标题和div.section h1CSS中使用标记,以便支持旧浏览器(不了解>)并保持标记语义.

Answer 7

不完全是所问的问题，但可能有用：

div.section > :first-child:is(div)

这将仅匹配.section 的第一个子元素，并且仅当它是 div 时。

匹配：

<div class="section">
  <div>MATCH</div>
  <div>NO MATCH</div>
  <div>
     <div>NO MATCH</div>
  </div>
</div>

没有匹配：

<div class="section">
  <img ... >
  <div>NO MATCH</div>
  <div>NO MATCH</div>
  <div>
     <div>NO MATCH</div>
  </div>
</div>