css - 优化 CSS：Narrow Definition (#mytable tbody span.myclass) 更好？

Question

我想知道是否有一个“狭隘”的定义，例如

#mytable tbody span.myclass
{
     color: #ffffff;
}

比解析更好/更快

.myclass
{
     color: #ffffff;
}

我在某处读到，狭义的定义实际上对 CSS 速度有某种不利影响，但我不记得在哪里而且已经有一段时间了，所以我只想澄清它是否重要，如果重要，哪种解决方案更好/更快。

谢谢！

Answer 1

Google 的 Page Speed 提供了一些关于使用高效 CSS 选择器的信息。我建议从那里开始。

所以（非常）基本上，他们建议：

避免使用后代选择器，尤其是那些指定冗余祖先的选择器

所以你的第二个选择是最快的。

Answer 2

我会选择前一个片段，而不用担心任何效率；除非你有十几个样式表 CSS 不会成为瓶颈。前一个片段更具可读性，并且您确切地知道您在设计什么样式，以及它在结构上属于哪里，所以当您跳回进行编辑时，您知道要搜索什么。

再说一次，如果您要制作像包含浮点数的类这样的全局样式，最好保持简单。

Answer 3

“速度优化”真的不应该与 CSS 有任何关系。任何现代浏览器的差异都是微不足道的，但使用上的差异却不是。您应该根据您想要实现的目标、您希望样式级联的程度、您希望它们适用的位置以及是否需要覆盖更广泛的选择器来决定何时使用“窄”或“宽”选择器。