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

Question

如果我有以下div:

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

有没有办法定义一个表达"带有id='content'AND 的div"这个想法的风格class='myClass'？

或者你只是采取一种方式或另一种方式

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

要么

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

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.myClasstagName 更快,因为它添加了一个您不需要的过滤步骤.仅在选择器中使用tagNames!

Answer 2

css 之间#header .callout和之间存在差异#header.callout.

以下是"普通英语" #header .callout:
选择具有类名的所有元素callout,这些元素是ID为的元素的后代header.

并且#header.callout意味着:
选择具有ID header且类名为的元素callout.

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

Answer 3

一般来说，您不需要对 id 指定的元素进行分类，因为 id 始终是唯一的，但如果您确实需要，以下应该可以工作：

div#content.sectionA {
    /* ... */
}

Answer 4

在一个元素上组合一个 id 和一个类并没有错，但是您不需要为一个规则通过两者来识别它。如果你真的想要，你可以这样做：

#content.sectionA{some rules}

您不需要div像其他人建议的那样在 ID 前面。

一般来说，特定于该元素的 CSS 规则应该使用 ID 设置，并且这些规则将比类的那些具有更大的权重。类指定的规则将是应用于多个项目的属性，您不想在需要调整时在多个位置更改这些项目。

这归结为：

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

有道理？