首页 文章

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

提问于
浏览 次
248

我有以下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的第一个直接子节点 . 如何更改选择器以获得我想要的？

html css css-selectors

5 回答

  • 420

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

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

    div.section > div

    如果您只想要 Headers ，请使用：

    div.section > div:first-child

    使用 > 将描述更改为："Find any divs that are the direct descendents of section divs"这是您想要的 .

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

    回复于
  • 39

    CSS称为层叠样式表，因为规则是继承的 . 使用以下选择器，将仅选择父项的直接子项，但其规则将由 div 的子项 divs 继承：

    div.section > div { color: red }

    现在，它的孩子们都将 red . 如果您不希望它继承，您需要取消在父级上设置的任何内容：

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

    现在只有那个 div.section 的直接子项 div 将是红色的，但它的子项 divs 仍然是黑色的 .

    回复于
  • 7

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

    .container > *:first-child
{
}
    回复于
  • 23
    div.section > div
    回复于
  • 6

    使用 div.section > div .

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

    回复于

相关问题