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

如果我有以下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>
387499 次浏览
小开
最佳答案

在样式表中:

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 !

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

当doctype是html 4.01时不会工作…

小开

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

小开

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

小开

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

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

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

#content.sectionA{some rules}

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

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

这可以归结为:

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

有意义吗?

小开

我认为你们都错了。id与Class不是专一性的问题;它们有完全不同的逻辑用途。

id应该用于标识页面的特定部分:页眉、导航栏、主要文章、作者属性、页脚。

应该使用类将样式应用到页面。假设你有一个一般的杂志网站。网站上的每个页面都有相同的元素——标题、导航、主文章、边栏、页脚。但是你们的杂志有不同的版块——经济、体育、娱乐。你希望这三个部分有不同的外观——经济上保守而保守，体育运动活泼，娱乐方面活泼而年轻。

你可以使用类来实现。你不希望有多个id——#economics-article、#sports-article和#entertainment-article。这说不通啊。相反，您应该定义三个类，.economics、sports和.entertainment，然后为每个类定义#nav、#article和#footer id。

小开

在css中#header .callout和#header.callout有区别

下面是#header .callout的“简单英语”:
选择类名为callout的所有元素，它们是ID为header的元素的后代 #header.callout表示:
选择ID为header且类名为callout的元素

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

小开

在css中的标签变量中使用:__abc0。

小开

继续Ajm的回答:

对于动态id或类选择组合->

div[id*='**myStandarKey-**'].myClass{


}


/* This is to validate something like: */


div[id*='myStandarKey-**12**'].myClass{


}


/* AND */


div[id*='myStandarKey-**13**'].myClass{


}


/* etc. */

提交答案