CSSselect器，>与空间

这个语法有什么意义

div.card > div.name 

这有什么区别

 div.card div.name 

Answer 1

A > B只会selectB的直接子对象A（即中间没有其他元素）。

AB将selectA内的任何B，即使它们之间有其他元素。

Answer 2

>是子select器。 它仅指定直接的子元素而不指定任何后代（包括孙辈，孙辈等），如同没有>的第二个例子。

IE 6及更低版本不支持子select器。 一个很好的兼容性表格在这里 。

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

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

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