如何结合类和ID在CSS选择器?

如果我有以下div:

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

是否有一种方法来定义一个风格，表达的想法“一个div与id='content'和类='myClass'”?

或者你只是简单地走一条路或者另一条路

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

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

当前回答

id应该是唯一的文档范围，所以您不应该基于两者进行选择。你可以用class="class1 class2"为一个元素指定多个类

其他回答

在一个元素上结合id和class并没有什么问题，但您不应该为了一条规则而同时使用两者来标识它。如果你真的想，你可以这样做:

#content.sectionA{some rules}

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

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

这可以归结为:

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

有意义吗?

在样式表中:

div#content.myClass

编辑:下面这些可能也会有所帮助:

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

而且，根据你的例子:

div#content.sectionA

编辑，4年后:因为这是超级老的，人们总是发现它:不要在你的选择器中使用tagNames。#内容。myClass比div#content快。myClass，因为tagName添加了您不需要的筛选步骤。在选择器中只在必要的地方使用tagNames !

#header. callout和#header之间有区别。css中的标注。

下面是#header .callout的“简单英语”: 选择具有类名标注的所有元素，这些元素是ID为header的元素的后代。

和#头。调出的意思是: 选择ID为header且类名为callout的元素。

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

id应该是唯一的文档范围，所以您不应该基于两者进行选择。你可以用class="class1 class2"为一个元素指定多个类

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

当doctype是html 4.01时不会工作…

推荐文章