CSS3：子样式的差异答案

【问题标题】：CSS3: Differences in child stylingCSS3：子样式的差异
【发布时间】：2012-10-28 23:11:54
【问题描述】：

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

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

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

#random_ID ul li a { ... }

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

【问题讨论】：

这是对同一个问题的一个非常好的答案：stackoverflow.com/a/746557/1461021

标签： css web

【解决方案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”

【讨论】：

子代是一级子孙。没有二级孩子。
对，我只是用“一级”来描述差异。
@Matt 也许将其更改为一级后代？

【解决方案2】：

> 表示“直接孩子”。只有当元素（> 右侧的元素）是父元素的直接子元素（> 左侧的元素）时，这才会设置样式

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

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

div > li { background: red; } 不起作用，因为 li 不是它的直接子级，而 div > ul > li> 或 div li 会起作用。

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

【讨论】：

现在是 2012 年。除非你在一个顽固的企业，you generally don't have to worry about browser support。
@BoltClock 我很欣赏这一点，我确信使用该信息的人可以决定他们是否需要支持 IE6，所以只是提及它以便他们知道。我的大量工作是为一位拒绝升级超过 IE6 的客户服务的。