CSS '>'选择器;它是什么？ [重复]

7 回答

• -3

  >选择直接孩子

  例如，如果你有这样的嵌套div：

  <div class='outer'>
      <div class="middle">
          <div class="inner">...</div>
      </div>
      <div class="middle">
          <div class="inner">...</div>
      </div>
  </div>
  

  并在样式表中声明一个css规则，如下所示：

  .outer > div {
      ...
  }
  

  你的规则只适用于那些具有“中间”类的div，因为这些div是具有类“outer”的元素的直接后代（直接子元素）（当然，除非你声明覆盖这些规则的其他更具体的规则） . 看小提琴 .

  div {
    border: 1px solid black;
    padding: 10px;
  }
  .outer > div {
    border: 1px solid orange;
  }
  

  <div class='outer'>
    div.outer - This is the parent.
    <div class="middle">
      div.middle - This is an immediate child of "outer". This will receive the orange border.
      <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
    </div>
    <div class="middle">
      div.middle - This is an immediate child of "outer". This will receive the orange border.
      <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
    </div>
  </div>
  
  <p>Without Words</p>
  
  <div class='outer'>
    <div class="middle">
      <div class="inner">...</div>
    </div>
    <div class="middle">
      <div class="inner">...</div>
    </div>
  </div>
  

  旁注

  相反，如果你在选择器而不是 > 之间有一个空格 `` ，那么你的规则将适用于两个嵌套的div . 这个空间更常用，并定义了一个"descendant selector"，这意味着它在树中寻找任何匹配的元素，而不是像 > 那样只是直接的子元素 .

  注意：IE6不支持 > 选择器 . 它确实适用于所有其他当前浏览器，包括IE7和IE8 .

  如果您正在研究不太常用的CSS选择器，您可能还需要查看 + ， ~ 和 [attr] 选择器，所有这些都非常有用 .

  This page包含所有可用选择器的完整列表，以及它们在各种浏览器（主要是有问题的IE）中的支持细节，以及它们的使用示例 .

  回复于 2024-04-25T08:01:32+08:00
• 693

  >选择所有直接后代/子项

  空格 `` 选择器将选择所有深层后代，而大于 > 选择器将仅选择所有直接后代 . 比如小提琴 .

  div { border: 1px solid black; margin-bottom: 10px; }
  .a b { color: red; } /* every John is red */
  .b > b { color: blue; } /* Only John 3 and John 4 are blue */
  

  <div class="a">
    <p><b>John 1</b></p>
    <p><b>John 2</b></p>
    <b>John 3</b>
    <b>John 4</b>
  </div>
  
  <div class="b">
    <p><b>John 1</b></p>
    <p><b>John 2</b></p>
    <b>John 3</b>
    <b>John 4</b>
  </div>
  

  回复于 2024-04-25T08:01:32+08:00
• 192

  它是CSS子选择器 . 例：

  div > p 选择所有直接子节点的段落 .

  见this

  回复于 2024-04-25T08:01:32+08:00
• 10

  正如其他人所说，它是一个直接的孩子，但值得注意的是，这与仅留下空间不同......任何后代都有空间 .

  <div>
    <span>Some text</span>
  </div>
  

  div>span 会匹配这个，但它不匹配：

  <div>
    <p><span>Some text</span></p>
  </div>
  

  为了匹配它，你可以做 div>p>span 或 div span .

  回复于 2024-04-25T08:01:32+08:00
• 3

  这是一个儿童选择器 .

  当元素是某个元素的子元素时，它匹配 . 它由两个或多个由“>”分隔的选择器组成 .

  例子）：

  以下规则设置作为BODY子元素的所有P元素的样式：

  body > P { line-height: 1.3 }
  

  例子）：

  以下示例组合了后代选择器和子选择器：

  div ol>li p
  

  它匹配作为LI的后代的P元素; LI元素必须是OL元素的子元素; OL元素必须是DIV的后代 . 请注意，“>”组合器周围的可选空白区域已被忽略 .

  回复于 2024-04-25T08:01:32+08:00
• 8

  它声明父引用，请查看此页面的定义：

  http://www.w3.org/TR/CSS2/selector.html#child-selectors

  回复于 2024-04-25T08:01:32+08:00
• 3

  这意味着父母/孩子

  例：

  HTML>体

  那就是说身体是html的孩子

  退房：Selectors

  回复于 2024-04-25T08:01:32+08:00