如何结合类和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指定的元素进行分类，因为id总是唯一的，但如果你真的需要这样做，下面的方法应该可以工作:

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

其他回答

用途:标签。id;在css中的标签变量中添加标签#类。

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

你可以在CSS中组合ID和Class，但是ID是唯一的，所以在CSS选择器中添加一个类会过度限定它。

一般来说，你不需要对id指定的元素进行分类，因为id总是唯一的，但如果你真的需要这样做，下面的方法应该可以工作:

div#content.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 !

推荐文章