有时我发现自己为单个元素创建CSS类。相反,我可以使用一个ID并为此ID设置一个规则。哪种方式更适合风格?CSS选择器样式?
3
A
回答
1
如果样式只是指一个,唯一的元素,基于ID选择器是最合适的。
如果样式引用多个元素,使用类。
要牢记的另一件事是基于ID的选择器比基于类的选择器具有更高的优先级。这有助于如果您的任何独特的ID'd元素继承了更通用的,基于分类的规则的样式。
2
没有硬性的就这一个快速的规则,这是因为很多有关:
- 你为什么要使用样式
- 你在做什么
- 你要去哪里
比所涉及的元件的数量多。
4
我会说,这更是一个人,通过人的偏好。
对我来说,我尝试着提前想:我会在一个页面上创建其中的两个吗?如果答案甚至含糊其词地说“是”,那我就用课堂。如果我看不到需要创建第二个特定元素,我将使用ID。
就ID本身而言,我尝试将其命名为我不会与之冲突的内容。举例来说,我会选择这样的:
#aboutus_team_wrapper {}
它的长和丑陋,但我确切地知道它是,在这里我使用它,我知道我永远不会创造的东西,与冲突名称。
希望这有助于!
0
我更喜欢在页面中重复使用最重要的元素,例如本页面上的Stackoverflow徽标(以及所有标题)。
如果元素不是页面特定的,可以在不同的页面之间重复使用CSS类,也可以在同一页面中多次使用CSS类。
3
不要忘了选择特异性!我尽可能避免使用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应用程序上处理这个问题。
相关问题
- 1. CSS选择器样式
- 2. CSS选择器应用样式
- 3. 从样式组中选择css样式
- 4. CSS:样式选择的选择列表
- 5. CSS选择器样式排除一些选择
- 6. 使用css的样式选择选项
- 7. CSS属性选择器对CSS样式高度
- 8. angular2伪选择器样式
- 9. 在另一个选择器中导入CSS选择器样式? (不是@import)
- 10. CSS有选择地应用样式
- 11. CSS样式选择输入像rent.com
- 12. 用户如何选择CSS样式?
- 13. CSS选择框箭头样式
- 14. HTML/CSS - 设置选择菜单样式
- 15. 选择框样式通过CSS
- 16. 在Chrome浏览器中选择器中的样式CSS
- 17. 选择时选择样式?
- 18. 如何将选择器样式导入到另一个选择器样式中?
- 19. 选择CSS选择器
- 20. CSS选择器选择
- 21. 正确添加一个:没有选择器,这些CSS样式
- 22. 在IE中不工作的字体选择器样式css类
- 23. 忽略某些类型选择器上的css样式
- 24. 内联样式属性的CSS选择器
- 25. Sifr3 - 是否可以使用父选择器覆盖CSS样式?
- 26. 用于选择器的css样式<tr>用asp.net gridview
- 27. 通过ID选择器不应用CSS背景图像样式
- 28. 列出样式表的所有CSS选择器的软件
- 29. 删除CSS样式表中未使用的选择器?
- 30. 简化HTML CSS选择器的样式表
http://google.com/?q=OOCSS – cgp 2010-10-20 14:58:55