css - CSS3：子样式的差异

Question

我不确定我的问题标题是否准确地显示了我要问的内容，但这几乎是我第一次接触 CSS3，并且一直在探索人们为了获得一些实践经验而做过的各种项目。

在搜索这些项目时，我发现了一些我难以理解的东西。以下两行之间究竟有什么区别：

#random_ID > ul > li > a { ... }

#random_ID ul li a { ... }

这只是写同一件事的两种方式吗？任何帮助将不胜感激！

Answer 1

大于符号将查找限制为仅第一级后代：左侧选择器的子代。没有符号，它可以是任何级别的任何后代。

所以第一个例子是“random_ID with a child ul with a child li with a child a”，第二个例子是“random_ID with any descendant ul with any descendent li with any descendent a”

Answer 2

>意思是“直接孩子”。仅当元素（右侧的一个>）是父元素（左侧的一个）的直接子>元素时，才会设置它的样式

所以说如果我有以下布局：

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

div > li { background: red; }不会工作，因为li不是它的直接孩子，而div > ul > li>ordiv li会工作。

应该注意的是，并不是每个浏览器都支持直接子标签，特别是旧版本的 Internet Explorer，所以不要依赖它，或者如果你确实使用它有一些后备。