具有嵌套CSS的类与ID

Question

假设这样的HTML:

<div id="header">
  <span class="title">Title</span>
  <!-- more spans and other things here -->
</div>

这将与嵌套的CSS一起使用:

#header .title { /* CSS */ }

这当然有效,但我不喜欢class这里的用法.由于我title只需要一次风格,我想使用id.但是这个名称必须是这样的header_title(因为我可能在HTML中有其他标题),从而产生了CSS

#header #header_title { /* CSS */ }

现在这似乎打败了嵌套CSS的目的,然后我可以完全放弃第一个#header.

我无法找到一种"正确"的方法.我错过了什么,或者我只需要在这里使用一些"脏"代码？

Answer 1

其实这并不重要。

您的标记最重要的是它是可读的；HTML 是语义化的，因此您的标记代表您的内容。通过这样做，如果您几个月后回到 HTML 而没有触及它，您应该能够快速了解​​您所写的内容:)

从语义上来说，#header .title对我来说更有意义#header #header_title，原因有二：一是因为它更容易阅读，二是因为 ids 的目的是识别！您可以#header_title单独使用，但限制您拥有的 id 数量会更干净。