小编典典

是否只有第一个直接子级的 CSS 选择器?

all

我有以下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 
{
  ...
}

由于某种原因,我不明白该样式被应用于 “sub contents 1” <div>以及 “header” <div>

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


阅读 96

收藏
2022-03-25

共1个答案

小编典典

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

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

div.section > div

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

div.section > div:first-child

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

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

2022-03-25