是否只有第一个直接孩子有 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> 。

我认为样式上的选择器仅适用于具有名为“部分”的类的 div 的第一个直接子级。如何更改选择器以获得我想要的？

原文由 Jeremy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您发布的字面意思是“查找 div 部分内的任何 div，并且是其父母的第一个孩子。” sub 包含一个与该描述相匹配的标签。

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

 div.section > div

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

 div.section > div:first-child

使用 > 将描述更改为：“查找作为 divs 部分直接后代的任何 divs”，这就是您想要的。

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

原文由 Matchu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在谷歌上搜索发现了这个问题。这将返回具有类 container 的元素的第一个子元素，无论该子元素是什么类型。

 .container > *:first-child
{
}

原文由 Tom Gullen 发布，翻译遵循 CC BY-SA 3.0 许可协议