在其他 CSS 选择器上使用元素 ID/类名答案

【问题标题】：Using element IDs/class names over other CSS selectors在其他 CSS 选择器上使用元素 ID/类名
【发布时间】：2026-02-11 05:35:02
【问题描述】：

我应该尝试使用其他 CSS 选择器而不是元素 ID/类名，反之亦然。

例如：body > header nav ul+ul { ... } 当我可以通过 #socialnav { ... } 来实现相同的目标时。

示例 HTML 代码（显然在代码的其他地方有带有子导航的标题）：

<header>
    <nav>
        <ul>...</ul>
        <ul....</ul>
    </nav>
</header>

对此有何共识？我的意思是，我发现使用 CSS 选择器可以做到这一点，但有缺点吗？

【问题讨论】：

【解决方案1】：

您的首要指导原则应该是保持标记语义。您上面的标记就是一个很好的例子 - 您正在以语义上有意义的方式使用 header、nav 和 ul 标记。

您的第二个指导原则应该是保持关注点分离（例如，内容和呈现）。如果在标记中添加类名或 id 在语义上对您没有任何帮助，并且您可以在没有它们的情况下制作 CSS 选择器，那么您应该避免在标记中添加额外的噪音。

然而，有时类名和 id 非常有用（不仅在 CSS 中，在 JavaScript 中也是如此），因此它们各有其用处。如果不需要它们，请不要使用它们，从而为您的标记添加不必要的混乱。

【讨论】：

【解决方案2】：

这取决于您的喜好。

我觉得使用body > header nav ul+ul 是不明智的，因为你的文档结构的一个小变化，你必须重写 CSS 选择器。

将.classselectors 和#id-selectors 用于不是主文档的重要组成部分的元素，并使用#one-special-item > ul > li > a:hover span 选择更具体的元素。

【讨论】：

【解决方案3】：

通常我会尽量避免在 CSS 中使用 ID 选择器。

我发现处理类比使用 ID 容易得多。

如果在服务器端应用程序（例如 ASP.NET）中使用标记，ID 可能会在以后导致问题，在该应用程序中，ID 的呈现方式与它们在标记中的显示方式不同。

但是，ID 选择器确实优先于类选择器：

【讨论】：

【解决方案4】：

您应该将样式表编写为您网站的规则集。

有时实际的 html 代码很难遵循这些规则，但如果您尝试总体上坚持这一点，那么您会没事的。如果您需要支持不支持您通常想要使用的所有 CSS 功能的旧版浏览器（咳嗽、IE、咳嗽），您可能还需要改变规则。

所以是的，我会说你在问题中的做法是推荐的方法。

【讨论】：

【解决方案5】：

使用 ID 和类作为选择器比使用普通的 css 选择器要快得多。有些人还认为你应该只使用类，因为它们鼓励你的样式表的可重用性。

【讨论】：