具有嵌套 CSS 的类与 ID答案

【问题标题】：Class vs ID with nested CSS具有嵌套 CSS 的类与 ID
【发布时间】：2011-12-30 00:19:22
【问题描述】：

假设 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。

我真的想不出一种“正确”的方法。我错过了什么，还是我只需要在这里处理一些“脏”代码？

【问题讨论】：

你不能只使用#header > span { /* CSS */ }之类的东西吗？
我实际上还有其他跨度，只是为了清楚起见而省略了。
对于嵌套在标题 div 中的多个跨度，您总是可以合并第 n 个子选择器吗？但是我看不出仅使用您的任何一个示例有什么问题？为什么你不想这么多使用它们？抱歉提问，我只是好奇:)
嗯，这或多或少是学术性的，只是从设计的角度来看，这些例子都没有真正“感觉”；）

【解决方案1】：

其实没关系。

关于你的标记重要的是它是可读; HTML 是关于成为语义，以便您的标记代表您的内容。通过这样做，如果你几个月后回到你的 HTML 而不接触它，你应该能够很快地了解你写的东西:)

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如何使用标题标签

#title h1{/* CSS */}

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

我想这就是标签的用途:)

【讨论】：

见我上面的评论。它实际上不是一个单一的跨度，而是许多，包括其他元素。为了简单起见，我只是将其剥离，也许我走得太远了；）
您是不是要输入#header 而不是#title？
@lucasclemente 我不会包含父级本身的名称，为了保持可读性，这是不必要的，我想如果它是您想要使用的 ID（因为它只会使用一次）我会使用前缀使其更简单吗？ #header #hTitle ?

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您似乎更担心命名约定。

完全可以使用

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

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

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

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

因为您的#header 中很可能只有一个 h1 标签

【讨论】：