css - CSS 选择器应该包含来自 DOM 的元素吗？

Question

几年前我在大学学习前端开发时，我们的老师教我们始终提供完整(几乎)的 parent 我们的 CSS 选择器中目标元素的 DOM 层次结构。

所以在我们的网络元素中，我们必须编写如下选择器:

div#container div#content p.bread a.external { }

而不仅仅是:

#container #content .bread .external { }

或者(我看到了这里可能发生的类冲突的缺点)

.external { }

我个人是这样写我的选择器的

#container #content p.bread a.external {}

直到我最近读到一篇文章说应该避免使用它(但没有明显的原因)和另一篇文章说相同但那篇文章是为 jQuery 选择器设计的。

我的老师错了吗？什么是编写 CSS 选择器的正确(解析速度最快且支持最多)的方法？

Answer 1

实际上，您应该尽可能使用最不具体的选择器。

div#container div#content p.bread a.external { } 是一个非常非常具体的选择器。它不必要地具体。只能有一个 #content 元素，它一定会始终在 #container 中。

编写通用规则。不要试图以精确的 DOM 元素为目标。如果 a.external 将捕获您想要的元素集，请使用它。否则，您最终将不得不编写 p.bread a.external、p.potato a.external、p.olive a.external等等等等

性能差异将很小。通用的、可重复使用的规则的好处是巨大的。