Question

有时我发现自己为单个元素创建了一个CSS类。因此，我可以使用ID并为此ID设置规则。哪种方式更符合风格？

Answer 1

我会说这更像是一个人的偏好。

对我而言，我试着提前思考：我会在一个页面上创建其中两个吗？如果答案甚至含糊不清，那么我就会使用课程。如果我看不到需要创建特定元素的第二个，我将使用ID。

就ID本身而言，我试着将其命名为我不会与之冲突的东西。例如，我会选择以下内容：

#aboutus_team_wrapper {}

这很长很难看，但我确切知道它的用途，我在哪里使用它，而且我知道我永远不会创造出与名称相冲突的东西。

希望这有帮助！

Answer 2

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

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

ID选择器比类选择器强10倍。这意味着您必须使用11个类选择器来取消ID选择器，或者您必须将相同的ID选择器附加到您编写的每个CSS规则，或者我最喜欢的，使用内联样式或！重要规则！

“但是为什么在我知道的元素上使用一个类样式只会出现一次？这就是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应用程序上处理这个问题。

Answer 3

对这一条没有严格的规则，这同样关乎：

为什么你要使用这种风格
你正在做什么
你要去的地方

超过所涉及的元素数量。

Answer 4

如果样式仅引用一个唯一元素，则基于ID的选择器是最合适的。

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

要记住的另一件事是基于ID的选择器具有比基于类的选择器更高的优先级。如果您的任何唯一ID'd元素从更通用的，基于类别的规则继承样式，这将有所帮助。

Answer 5

我更喜欢将id用于页面中重复的最重要元素，例如此页面上的Stackoverflow徽标（以及所有标题）。

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

CSS选择器样式？

5 个答案: