CSS选择器样式？

Question

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

Answer 1

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

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

要牢记的另一件事是基于ID的选择器比基于类的选择器具有更高的优先级。这有助于如果您的任何独特的ID'd元素继承了更通用的，基于分类的规则的样式。

Answer 2

没有硬性的就这一个快速的规则，这是因为很多有关：

• 你为什么要使用样式
• 你在做什么
• 你要去哪里

比所涉及的元件的数量多。

Answer 3

我会说，这更是一个人，通过人的偏好。

对我来说，我尝试着提前想：我会在一个页面上创建其中的两个吗？如果答案甚至含糊其词地说“是”，那我就用课堂。如果我看不到需要创建第二个特定元素，我将使用ID。

就ID本身而言，我尝试将其命名为我不会与之冲突的内容。举例来说，我会选择这样的：

#aboutus_team_wrapper {} 

它的长和丑陋，但我确切地知道它是，在这里我使用它，我知道我永远不会创造的东西，与冲突名称。

希望这有助于！

Answer 4

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

如果元素不是页面特定的，可以在不同的页面之间重复使用CSS类，也可以在同一页面中多次使用CSS类。

Answer 5

不要忘了选择特异性！我尽可能避免使用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应用程序上处理这个问题。