'>' 和 CSS 选择器中的空格有什么区别？答案

【问题标题】：What is the difference between '>' and a space in CSS selectors?'>' 和 CSS 选择器中的空格有什么区别？
【发布时间】：2011-02-07 20:19:01
【问题描述】：

使用这种语法有什么意义

div.card > div.name

这有什么区别

div.card div.name

【问题讨论】：

关于这个问题，因为我不知道这一点，可以用来解决我遇到的问题，哪些浏览器支持这种类型的选择器？
当前所有浏览器都支持。 IE 在版本 7 中获得支持：msdn.microsoft.com/en-us/library/…

标签： css css-selectors

【解决方案1】：

A > B 只会选择 B 是 A 的直接子元素（也就是说，中间没有其他元素）。

A B 将选择 A 内部的任何 B，即使它们之间还有其他元素。

【讨论】：

【解决方案2】：

> 是child selector. 它只指定直接子元素而不是任何后代（包括孙子、孙子等），如第二个示例中没有>。

IE 6 及更低版本不支持子选择器。一个很好的兼容性表是here。

【讨论】：

【解决方案3】：

div.card > div.name 匹配 <div class='card'>....<div class='name'>xxx</div>...</div> 但它不匹配<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name 匹配两者。

也就是说，> 选择器确保选中的元素在右侧 > 是其左侧元素的直接子元素。

没有> 的语法匹配任何<div class='name'>，它是<div class='card'> 的后代（不仅是孩子）。

【讨论】：

【解决方案4】：

> 与空间

考虑div > span { } 与div span { } 的两种情况

这里，（空格）选择了<div> 元素中的所有<span> 元素，即使它们嵌套在多个元素中。 > 选择 <div> 元素的所有子元素，但如果它们不在另一个元素内。

看两个例子：

>（大于）：

div > span {
  color: #FFBA00 ;
}

<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

    <span>World!</span>
  </div>
</body>

这个只是选择<span>Hello...</span>（因为它紧跟在嵌套的div标签之后）和<span>World!</span>，它不会在<p>标签内寻找<span>，因为它不是紧跟在一个div 标签。

空格

div span {
  color: #0A0 ;
}

<body>
  <div>
    <div>
      <span>Hello...</span>
      <p><span>Hello!</span></p>
    </div>

    <span>World!</span>
  </div>
</body>

这个选择所有的span标签，即使它们嵌套在其他标签中。

【讨论】：

【解决方案5】：

A > 如果 B 是 A 的直接子代，则 B 选择 B，而无论 B 是否是 B 的直接子代，A B 都选择 B。

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>

【讨论】：

这里有一个代码sn-p。不知道你能不能看到。
演示很好，但实际上只是对回答问题的信息的辅助；其他三个答案中已经存在的信息。也许如果今天问这个问题，那会很有用，但如果你要解决一个 > 8 岁的问题，那真的应该是一个令人信服的理由。