Question

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

例如：body > header nav ul+ul { ... }我可以#socialnav { ... }做同样的事情。

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

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

对此有何共识？我的意思是，我觉得使用CSS选择器可以管理它，但是有缺点吗？

Answer 1

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

您的第二个指导原则应该是保持关注点分离（例如，内容和演示文稿）。如果在标记中添加类名或id不会对语义产生任何影响，并且你能够创建出CSS选择器，那么你应该避免在标记中添加额外的噪声。

但是，有时候，类名和id是非常有用的（不仅在CSS中，而且在JavaScript中），所以它们有它们的位置。如果不需要它们就不要诉诸它们，因此会给你的标记带来不必要的混乱。

Answer 2

这取决于您的偏好。

我发现使用body > header nav ul+ul并不明智，因为文档结构发生了很小的变化，你必须重写CSS选择器。

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

Answer 3

通常我会尝试避免CSS中的ID选择器。

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

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

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

Answer 4

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

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

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

Answer 5

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