使用"space"或">"分隔CSS项目有什么区别

Question

说,我们有这个代码:

<div>
  <ul>
    <li></li>
  </ul>
</div>

<style>div ul li { ... }</style>和之间有什么区别<style>div > ul > li { ... }</style>？

Answer 1

空间是后代选择器.它将样式应用于所有匹配的后代(儿童,孙子,曾孙......)

>是一个子选择器.它只适用于父母的子女.

我们以此HTML为例:

<section class=foo>
    <div class=blue>
        <span class=blue></span>
    </div>
</section>

让我们用后代选择器设置它的样式:

.foo .blue {
    color: blue;
}

使用上面的CSS,div和span都是蓝色的.实际上,如果你给它类"蓝色",.foo里面的任何元素都会变成蓝色.

现在看看这个CSS:

.foo > .blue {
    color: blue;
}

使用此CSS,只有div为蓝色.尽管有"蓝色"类,但跨度不会是蓝色,因为它不是.foo的孩子