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

Question

使用这种语法有什么意义

div.card > div.name

这有什么区别

div.card div.name

Answer 1

A > B 只会选择B作为A的直接子项(也就是说,其间没有其他元素).

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

Answer 2

> 与太空

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

在这里， (space) 选择 element内的所有元素，即使它们嵌套在多个元素内。选择元素的所有子元素，但如果它们不在另一个元素内。<span><div>><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>它不会查找<span>内部<p>标签，因为它不是紧接在div标签之后。

div span {
  color: #0A0 ;
}

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

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

此选项选择所有 span 标签，即使它们嵌套在其他标签内。

Answer 3

>是子选择器.它只指定直接的子元素,而不是任何后代(包括孙子,孙子孙等),如第二个例子中没有>.

IE 6及更低版本不支持子选择器.这里有一个很好的兼容性表.