CSS选择器样式是什么？

Question

有时候我会为一个单独的元素创建一个CSS类。那么，我可以使用ID并为该ID设置规则。从样式上来说，哪种方式更可取？

- akonsu

Answer 1

我认为这更多是个人偏好的问题。

对于我来说，我会尽量考虑未来：我是否会在同一页上创建两个相同的元素？如果答案模糊地是“是”，那么我就使用类。如果我看不到创建特定元素的第二个需要，我会使用ID。

至于ID本身，我会尝试给它命名一个不会与其他冲突的名称。例如，我会选择像这样的东西：

#aboutus_team_wrapper {}

这段代码很长且难看，但我知道它的作用以及在哪里使用它，并且我知道我永远不会创建与该名称冲突的内容。

希望这可以帮到您！

- mattbasta

Answer 2

不要忘记选择器的特异性！我尽量避免使用ID选择器。

参考资料：http://www.w3.org/TR/CSS2/cascade.html（6.4.3）

ID选择器比类选择器强10倍。这意味着你需要使用11个类选择器才能取消一个ID选择器，或者你需要将相同的ID选择器附加到你编写的每个CSS规则中，或者使用内联样式或!important规则。

“但是为什么要在我知道只会出现一次的元素上使用类样式？这就是ID选择器的用途。”

因为ID选择器会破坏层叠。考虑下面（非语义）代码以说明这种说法。

<style type="text/css">
    #header a { /*Selector Weight: 101*/
        font-weight: normal;
    }
    .bold { /*Selector Weight: 10*/
        font-weight: bold;
    }
</style>
<div id="header">
    <a href="#">Happily not bold.</a>
    <a href="#" class="bold">Sadly, not so bold.</a>
</div>

<a href="#" class="bold">SO bold...</a>

为了使它起作用，您需要添加：

要使此功能生效，您需要添加：

    #header .bold { /*Selector Weight: 110*/
        font-weight: bold;
    }

太好了，现在我们有两个加粗的类。可以看出这会很快让你陷入困境。想象一下在一个功能齐全的Web应用程序中如何处理这个问题。

- Bryan Downing

Answer 3

这个问题并没有硬性规定，它更多地涉及以下方面：

• 你为什么使用这种样式
• 你在做什么
• 你要达到的目标是什么

而不是所涉及元素的数量。

- cgp

Answer 4

如果一个样式只涉及一个唯一元素，基于ID的选择器是最合适的。

如果一个样式可能涉及多个元素，请使用类。

另一个需要记住的事情是，基于ID的选择器比基于类的选择器具有更高的优先级。 如果你的唯一ID元素继承了来自更通用的基于类的规则的样式，则这将有所帮助。

- Phil

Answer 5

我更喜欢为页面中重复出现的最重要元素使用ID，例如此页面上的Stackoverflow标志（以及所有标题）。

当元素不是特定于页面并且可以在不同页面之间重复使用或在同一页中多次重复时，请使用CSS类。

- Diego Jancic