如何在 CSS 选择器中组合类和 ID？

Question

如果我有以下 div：

 <div class="sectionA" id="content">
    Lorem Ipsum...
</div>

有没有办法定义一种风格来表达“带有 id='content' AND class='myClass' 的 div ”的想法？

还是您只是像在

<div class="content-sectionA">
    Lorem Ipsum...
</div>

或者

<div id="content-sectionA">
    Lorem Ipsum...
</div>

原文由 Larsenal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您的样式表中：

 div#content.myClass

编辑：这些也可能有帮助：

 div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

并且，根据您的示例：

 div#content.sectionA

编辑，4 年后： 因为这是超级旧的，人们一直在寻找它： 不要 在你的选择器中使用 tagNames。 #content.myClass 比 div#content.myClass 快，因为 tagName 添加了您不需要的过滤步骤。 仅在必须的地方使用选择器中的 tagNames！

原文由 ajm 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

#header .callout 和 #header.callout 在css中存在差异。

这是 #header .callout 的“简单英语”：

选择类名称为 callout 的所有元素，这些元素是 ID 为 header 的元素的后代。

而 #header.callout 表示：

选择 ID 为 header 且类名称为 callout 的元素。

你可以在这里阅读更多 css 技巧

原文由 Reza Abbasi 发布，翻译遵循 CC BY-SA 4.0 许可协议