具有嵌套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

使用#id .class {style:rules;}并非“脏”。这是正确的做法。此外，如果你“可能在HTML中有其他标题”，那么使用类而不是基于15个id的规则会更加正确。

Answer 2

实际上并不重要。

标记的重要性在于它可读; HTML是关于语义，因此您的标记代表您的内容。通过这样做，如果你几个月后回到你的HTML而不触及它，你应该能够快速了解​​你写的东西：）

从语义上讲，#header .title对#header #header_title更有意义，原因有两个：一，因为它更容易阅读，两个，因为ids的目的是，确定！您可以单独使用#header_title，但限制您拥有的ID数量会更加清晰。

Answer 3

如何使用标题标记

#title h1{/* CSS */}

<div id="header">
    <h1>Title</h1>
</div>

我猜这就是标签的用途：）

Answer 4

如果只有一个要设置样式的元素，请使用ID，因为ID无法复制。如果有可能存在多个具有类title的元素（在#header div之内和之外），那么请坚持使用您的第一个CSS示例，因为这将确保只有元素具有

这实际上取决于HTML的其余部分以及您要设计的样式。

Answer 5

好像你更担心命名惯例。

完全可以使用

 #header #title {/** css **/}

在您的情况下，最好的方法可能是使用“脏”方法。

我不确定为什么你会选择使用跨越h1，h2，因为我会这样做

 #header h1 {/** css **/}

因为你的#header

中很可能只有一个h1标签