用"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类"blue"，那么它里面的任何元素都会变成蓝色。

现在看看这个CSS：

.foo > .blue {
    color: blue;
}

有了这个CSS，只有div是蓝色的。尽管span具有类"blue"，但它不会是蓝色的，因为它不是.foo 的子级