使用新的HTML5元素会降低CSS的特异性

Question

以前，为侧边栏应用样式时，我们会编写以下代码：

<div id="sidebar">
<p>Some text...</p>
</div>

相应的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元素，那么哪种方法比较合适？

- Navaneeth

---

你完全可以在HTML中使用<aside id="sidebar">，并且使用aside#sidebar来定义样式，但是是否应该使用id作为选择器仍然存在争议。 - Ulrich Schwarz

取决于你是否只针对HTML5，我认为你的问题无法回答...或者答案就是使用支持目标HTML的内容。也许你可以解释一下为什么你认为你提出的建议不正确...似乎你指出的是事实而不是问题？ - Seabizkit

只要目标浏览器支持所有的HTML5元素，你就不需要一开始编写遗留标记，也就不会遇到这个问题了。 - BoltClock

如果特定性的变化不会影响您的程序——在设计良好的应用程序中，它希望不会——那么问题是什么？ - user663031

Answer 1

假设目标浏览器支持所有HTML5元素，哪种方法更合适？

使用HTML5元素的后一种方法是最好的方法，但是有两件事情需要考虑规则特定性：

1. HTML5 is better at reducing clashes based on just element name alone as there are more of them, and when used correctly. Consider:

   <div class="section">words...<div class="aside"><p>an aside</p>
   

   versus

   <section>words...<aside><p>an aside</p>
   

   The latter is better as the semantics of the document are within the tags themselves.

2. When you are reusing a structure, its fine to add id and class attributes to make structure clearer.

   <section>words...<aside><p>an aside</p>
   <section>copyright...<aside><p>year of copyright</p>
   

   versus

   <section class="article">words...<aside><p>an aside</p>
   <section class="copyright">copyright...<aside><p>year of copyright</p>
   

   Here, the class on the latter adds context and reduces rule ambiguity.

所以，最终回答你的问题是要聪明地使用HTML5元素，并在适当的地方使用类。

- user764357

Answer 2

根据 MDN 文档，特异性是一种权重，基于每个选择器类型的数量应用于给定的 CSS 声明。在特异性相等的情况下，应用最后在 CSS 中找到的声明到元素上。特异性仅适用于针对相同元素的情况。直接针对元素的 CSS 规则始终优先于从祖先继承的规则。

然后，标签比类更低，比 id 更低。还评估外部 CSS 链接文件的优先级和内部/内联 CSS 声明。

对于这种信息，您可以参考特定的浏览器（引擎）。

对于 Mozilla，您可以参考此文档 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 在您的情况下，您有一个 id CSS 规则（更具体）和一个标签 CSS 规则（较不具体）。

- ScaisEdge

---

OP知道特定性。他正在问一个具体的问题——使用新的语义元素而不是类是否会影响他使用它们的决定，因为这会改变特定性。 - user663031