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

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

Answer 1

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

我不清楚你是否想要主要div的两个孩子。如果是这样，请使用：

div.section > div

如果您只想要标题，请使用：

div.section > div:first-child

使用>将描述更改为：“查找任何div，它们是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

div.section > div

Answer 5

使用div.section > div。

更好的是，在标题中使用<h1>标记，在CSS中使用div.section h1，以便支持旧浏览器（不了解>）和保持你的标记语义。

Answer 6

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

.section > :first-child

直接选择器为>，第一个子选择器为：first-child

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

div.section > :first-child

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

6 个答案: