CSS选择器应该包括来自DOM的元素吗？

几年前，当我在大学学习前端开发时，我们的老师教我们始终提供完整（几乎）的家长支持 CSS选择器中目标元素的DOM层次结构

因此，在我们的web项目中，我们必须编写选择器，如：

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

而不仅仅是：

#容器#内容.面包.外部{}

或者（我看到这里可能出现的阶级冲突的缺点）

.external{}

我亲自编写选择器，如

#容器#内容p.bread a.external{}

直到最近，我读到一篇文章说应该避免使用它（但没有明显的原因），另一篇文章也说了同样的话，但这篇文章是针对jQuery选择器的

---

我的老师错了吗？写CSS选择器的正确方法是什么（解析最快，支持最多）？

更长的选择器，如

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

确实需要更长的时间，是的。但它们很少对喷漆时间产生明显影响

---

此外，由于ID（应该）总是唯一的，

div#container

和

div#content

实际上应该分别是

#container

和

#content

。

这两种方法都可以工作，对速度的影响可能最小。但是，没有必要将元素添加到规则中，我鼓励您不要这样做，因为它可以帮助您的规则变得更加可重用——这是您应该始终追求的目标

---

您还应该避免使用位置作为目标元素。例如，

。侧栏h3

。相反，在那些

h3

s中添加一个类，并以该类为目标。这意味着您可以重用在其他地方编写的样式，只需添加类即可。这些都是面向对象CSS的概念，通过减少重复代码的数量，可以帮助您编写更高效的CSS。

实际上，您应该使用尽可能少的特定选择器

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

是一个非常特别的选择器。这是不必要的具体。只能有一个

#content

元素，它肯定总是在

#容器中

写一般规则。不要试图以精确的DOM元素为目标。如果
a.external
将捕获所需的元素集，请使用该元素。否则，您将不得不编写
p.bread a.external
，
p.potato a.external
，
p.olive a.external
，等等

性能上的差异将是最小的。一般的、可重用的规则的好处是巨大的。
元素与ID选择器（
#
）一起使用时是多余的（或者应该是多余的），因为DOM应该只包含元素的唯一ID

还值得注意的是，应该使用类来组合相同元素的样式。如果你的DOM中有两个<>代码>面包<代码>元素，但要使它们风格不同，你应该考虑使用不同的类名。
 <是的，你的老师是错的。

从你的例子来看：

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

假设DOM文档中的ID必须是唯一的，那么永远不需要在选择器中指定多个ID。因此，上述同时包含
#容器
和
#内容
的选择器根据该标准立即就错了


ID是引用元素的最有效和最直接的方式。同样，它是唯一的，可以立即访问，因此无需以任何方式对其进行限定，因此在
#container
或
#content
前面添加
div
是多余的


选择器
p.bread
和
a.external
的其他两个部分可能是错误的，但对于这些部分来说，它不是那么明确

选择器只需指定选择所需图元和排除任何不需要的图元所需的零件。在本例中，如果所有
.bread
元素都是
p
s或所有
元素，外部
元素都是
a
s，那么元素类型
a
或
p
将是冗余的，应该删除。但是如果看不到实际的HTML内容，就不可能像IDs那样确定这一点，因为给定的类名可以合法地应用于多种类型的多个元素


我的2美分
通常的规则是，只针对需要针对的对象（正如其他人所说）

我同意lonesomeday所说的“性能上的差异将是最小的”，但链中每增加一个元素都是一个需要做的检查

因此，请考虑如何减少它


需要身份证吗

我不同意Spudley所说的“永远不需要在一个选择器中指定多个ID”。如果您的站点设置为在不同的页面上有不同的显示，那么
#page1#content
与
#page2#content
在一个选择器中显示两个ID是合法的。但是,

如果所有页面都是
#容器#内容
，则删除
#容器

另外，如果所有
p.bread
元素都在
#content
中，则也可以删除该选择器

是否需要元素名称

.bread
是否用于除
p
以外的任何物品？如果没有，请放下
p
.external
是否打算用于
a
以外的任何内容（可能链接到外部站点）？如果没有，请放下
a

是否需要阶级的死者关系

.bread.external
对于显示是否重要？也就是说，<代码> >外部<代码>存在于<代码> >面包>代码>