在将样式应用于边栏之前，我们将编写以下内容
<div id="sidebar">
<p>Some text...</p>
</div>
然后将颜色设置为Red的相应CSS就像
#sidebar p{
color: Red;
}
这里的CSS特殊性是{0,1,0,1}
在HTML5中，我们有aside元素可以用作
<aside>
<p>Some text..</p>
</aside>
而将颜色设置为红色的CSS将是
aside p{
color:Red;
}
通过使用HTML5元素，CSS特异性为{0,0,0,2}
使用HTML5元素可以改善语义。但是HTML5元素降低了CSS特异性。如果目标浏览器支持所有HTML5元素，那么在这两种方法中哪个合适？
如果目标浏览器支持所有HTML5元素，那么在这两种方法中哪种合适？
使用HTML5元素的后一种方法将是最好的方法，但是关于规则的特殊性有两点要考虑：
HTML5可以更好地减少仅基于元素名称的冲突，因为冲突更多，而且使用正确时也是如此。考虑：
<div class="section">words...<div class="aside"><p>an aside</p>
相对
<section>words...<aside><p>an aside</p>
后者更好，因为文档的语义在标签本身之内。
重用结构时，可以很好地添加id和class属性，以使结构更清晰。
<section>words...<aside><p>an aside</p>
<section>copyright...<aside><p>year of copyright</p>
相对
<section class="article">words...<aside><p>an aside</p>
<section class="copyright">copyright...<aside><p>year of copyright</p>
在此，后者上的类增加了上下文并减少了规则的歧义。
因此，最终您的问题的答案是在适当的情况下，通过类智能地使用HTML5元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句