如何在CSS选择器类和ID结合？如何在CSS选择器类和ID结合？(How to combine cl

如果我有以下的div：

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

有没有一种方法来定义表达想法风格“一个div id='content'和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年后：由于这是超级老人们不断寻找它：在你选择不使用的标记名。 #content.myClass快于div#content.myClass因为标记名增加了过滤步骤，你不需要。 使用在选择标记名只有在那里你必须！

Answer 2:

有差异#header .callout和#header.callout在CSS。

这里是“纯英语” #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}

合理？

Answer 5:

您可以在CSS结合ID和类别，但ID的意图是唯一的，所以添加类CSS选择器会过分限定它。

Answer 6:

使用方法： tag.id ; tag#class tag.id ; tag#class在你的CSS标签变量。

Answer 7:

IDS应该是惟一的文档宽，所以你不应该选择基于两个。您可以指定一个元素多个类虽与class="class1 class2"

Answer 8:

我想你们都错了。的ID与类不是特异性的问题; 他们有完全不同的逻辑用途。

ID应该被用来识别一个页面的特定部分：头，导航栏，主要的文章，作者归属，页脚。

类应使用样式应用到该页面。比方说，你有一本普通杂志的网站。网站上的每一页都将有相同的元素 - 标题，导航，主要文章，侧边栏，页脚。但是，你的杂志有不同的部分 - 经济，体育，娱乐。您希望这三个部分有不同的外观 - 经济学保守和广场，体育动作，Y，娱乐明亮，年轻。

您可以使用类为。你不希望有使多个ID - ＃经济学，文章和＃体育的文章和＃娱乐文章。这是没有意义的。相反，你将定义三类，.economics，体育，.entertainment，然后定义#nav，#article和#footer每个IDS。

Answer 9:

.sectionA[id='content'] { color : red; }

当DOCTYPE HTML是4.01，虽然将无法正常工作...

文章来源: How to combine class and ID in CSS selector?