html - 带有嵌套 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 数量会更简洁。