“>”和CSS选择器中的空格有什么区别？

126

使用这种语法有什么意义

div.card > div.name

这有什么区别

div.card div.name

css css-selectors

— 兰迪·梅耶
source

对于这个问题，我还不知道，可以用来解决我遇到的问题，哪些浏览器支持这种选择器？

— 凯尔2010年

3

当前所有浏览器均支持该功能。：IE拿到第7版中支持msdn.microsoft.com/en-us/library/...

— 马蒂·Virkkunen

210

A > B 只会选择直接成为A的子级的B（也就是说，它们之间没有其他元素）。

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

— 马蒂·维克库宁（Matti Virkkunen）
source

11

>是子选择器。它仅指定直接子元素，而不指定任何后代（包括孙子，孙子等），如第二个示例中不带的>。

IE 6和更低版本不支持子选择器。一个伟大的兼容性表在这里。

— 佩卡
source

2

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 两者都匹配。

也就是说，>选择器确保元素右侧的选定元素>是元素左侧的子元素。

不包含>match 的语法将匹配<div class='name'>的后代（不仅是孩子）<div class='card'>。

— 蕾妮·尼芬格
source

0

如果A> B是A的直系子代，则选择B；而AB无论是否是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>

展开摘要

— oz
source

这里有一个代码片段。我不知道你能不能看到它。

— eozten

该演示很好，但实际上只是回答问题的信息的辅助；其他三个答案中已经包含的信息。也许今天问这个问题会很有用，但是如果您要问一个8岁以上的老问题，那确实是一个令人信服的原因。

— TylerH

0

>太空

考虑两种情况div > span { }。div span { }

在此，即使元素位于另一个元素内，也会<space>选择所有<span>元素的所有<div>元素。>选择<div>元素的所有子元素，但如果它们在另一个元素中。

>（大于）：

div > span {
  color: #FFBA00 ;
}

<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

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

展开摘要

这只是选择，<span>World!</span>而不会寻找<span>Inside <p>标签。

空间

div span {
  color: #FFBA00 ;
}

<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

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

展开摘要

即使这些span标签嵌套在另一个标签中，它也会选择所有span标签。

— 高斯瓦米
source