有时候我会为一个单独的元素创建一个CSS类。那么,我可以使用ID并为该ID设置规则。从样式上来说,哪种方式更可取?
我认为这更多是个人偏好的问题。
对于我来说,我会尽量考虑未来:我是否会在同一页上创建两个相同的元素?如果答案模糊地是“是”,那么我就使用类。如果我看不到创建特定元素的第二个需要,我会使用ID。
至于ID本身,我会尝试给它命名一个不会与其他冲突的名称。例如,我会选择像这样的东西:
#aboutus_team_wrapper {}
这段代码很长且难看,但我知道它的作用以及在哪里使用它,并且我知道我永远不会创建与该名称冲突的内容。
希望这可以帮到您!
<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应用程序中如何处理这个问题。
这个问题并没有硬性规定,它更多地涉及以下方面:
而不是所涉及元素的数量。
如果一个样式只涉及一个唯一元素,基于ID的选择器是最合适的。
如果一个样式可能涉及多个元素,请使用类。
另一个需要记住的事情是,基于ID的选择器比基于类的选择器具有更高的优先级。 如果你的唯一ID元素继承了来自更通用的基于类的规则的样式,则这将有所帮助。
我更喜欢为页面中重复出现的最重要元素使用ID,例如此页面上的Stackoverflow标志(以及所有标题)。
当元素不是特定于页面并且可以在不同页面之间重复使用或在同一页中多次重复时,请使用CSS类。