CSS 性能：后代选择器还是两个直接后代选择器最好？

Posted 2023-03-06

【中文标题】CSS 性能：后代选择器还是两个直接后代选择器最好？

【英文标题】：CSS performance: descendent or two direct descendent selectors best?

【发布时间】：2015-06-27 23:19:20

【问题描述】：

给定以下 html：

<ul>
  <li>
    <a ...

对于同一组声明，考虑到它们的性能，这两个规则集中哪一个更可取？

ul > li > a 
  color: black

ul a 
  color: black

【问题讨论】：

我不认为这是一个值得否决的问题。也许尝试改进这个标题。我有兴趣看到答案。 +1

没有足够的建设性来回答，在某些情况下，html代码需要设计css才能应用。从 Dom CssDom 和浏览器中的所有 dom 来看，也许有一种技术方法可以以最有效的方式“谈论”css。但是在网络代理或其他缺乏知识的情况下，您会花费更多时间来尝试解决为什么您的页面从一个导航器到另一个导航器看起来不一样。

在你的问题中添加各种键选择器，如 [li > div > p > a] 同级有 [li > div > span > a] 或 [li > p > a] 到考虑定位元素的不同方法的数量以及减少重复的必要性......

我认为对于复杂的应用程序，最好使用“.list, .list-item, .list-item-link “标签类别规则不应包含子选择器”之类的类

这也与良好的 css-reset 结构有关。

【参考方案1】：

要学习的最基本概念是此规则过滤。类别的存在是为了过滤掉不相关的规则（因此样式系统不会浪费时间尝试匹配它们）。

例如，如果一个元素有一个 ID，那么只有匹配该元素 ID 的 ID 规则才会被检查。只会检查在元素上找到的类的类规则。只会检查与标签匹配的标签规则。将始终检查通用规则。

避免使用后代选择器

后代选择器是比子选择器更昂贵的选择器

BAD（后代选择器） 每当“ul”元素中的任何位置出现“a”时，将文本颜色设置为黑色

 ul a 
  color: black

比上面更好（子选择器） “a”元素必须是“li”元素的子元素； “li”元素必须是“ul”元素的子元素

 ul > li > a 
  color: black

进一步阅读LINK

【讨论】：

在你的回答中引用这个“要学习的最基本的概念是这个规则过滤。类别的存在是为了过滤掉不相关的规则（因此样式系统不会浪费时间尝试匹配它们） 。”并澄清你所说的“避免”后代选择器的意思。

@MilchePatern 是的，这是重要的部分！我会添加

* box-sizing:border-box;文字阴影：2px 3px 9px #FF0000;文字阴影：2px 3px 9px #FF0000, 1px 1px 9px #0000FF；文字阴影：0 0 3px rgba(255, 0,0,0.5;

@alejandro 如果您满意，请确保选择答案。回答问题需要时间。

您可能需要编辑此内容以引用更新的来源。来自链接的文档：“注意：本文档最初是在 2000 年编写的。在编写快速的 CSS 方面发生了很大变化”