如何在 CSS 选择器中组合类和 ID？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1028248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to combine class and ID in CSS selector?
提问by Larsenal
If I have the following div:
如果我有以下 div：
<div class="sectionA" id="content">
Lorem Ipsum...
</div>
Is there a way to define a style that expresses the idea "A div with id='content'AND class='myClass'"?
有没有办法定义一种表达“A div with id='content'AND class='myClass'”的样式？
Or do you have simply go one way or the other as in
或者你只是简单地走一种方式或另一种方式
<div class="content-sectionA">
Lorem Ipsum...
</div>
Or
或者
<div id="content-sectionA">
Lorem Ipsum...
</div>
回答by ajm
In your stylesheet:
在您的样式表中：
div#content.myClass
Edit: These might help, too:
编辑：这些也可能有帮助：
div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */
and, per your example:
并且，根据您的示例：
div#content.sectionA
Edit, 4 years later:Since this is super old and people keep finding it: don'tuse the tagNames in your selectors. #content.myClassis faster than div#content.myClassbecause the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!
编辑，4 年后：由于这是超旧的并且人们不断发现它：不要在选择器中使用 tagNames。#content.myClass比div#content.myClass因为 tagName 添加了您不需要的过滤步骤更快。仅在必须的地方使用选择器中的 tagNames！
回答by Reza Abbasi
There are differences between #header .calloutand #header.calloutin css.
css#header .callout和#header.calloutcss之间存在差异。
Here is the "plain English" of #header .callout:
Select all elements with the class name calloutthat are descendants of the element with an ID of header.
这是 的“普通英语” #header .callout：
选择所有类名callout的元素，这些元素是 ID 为 的元素的后代header。
And #header.calloutmeans:
Select the element which has an ID of headerand also a class name of callout.
并且#header.callout意味着：
选择具有 IDheader和类名称的元素callout。
You can read more here css tricks
你可以在这里阅读更多css 技巧
回答by Blixt
Well generally you shouldn't need to classify an element specified by id, because id is always unique, but if you really need to, the following should work:
一般来说，您不需要对由 id 指定的元素进行分类，因为 id 始终是唯一的，但如果您确实需要，以下应该起作用：
div#content.sectionA {
/* ... */
}
回答by Gabriel Hurley
There's nothing wrong with combining an id and a class on one element, but you shouldn't need to identify it by both for one rule. If you really want to you can do:
在一个元素上组合一个 id 和一个类并没有错，但是您不需要为一个规则通过两者来标识它。如果你真的想要，你可以这样做：
#content.sectionA{some rules}
You don't need the divin front of the ID as others have suggested.
您不需要div像其他人建议的那样在 ID 前面。
In general, CSS rules specific to that element should be set with the ID, and those are going to carry a greater weight than those of just the class. Rules specified by the class would be properties that apply to multiple items that you don't want to change in multiple places anytime you need to adjust.
一般来说，特定于该元素的 CSS 规则应该使用 ID 设置，并且这些规则将比类的那些具有更大的权重。类指定的规则将是应用于多个项目的属性，您不想在需要调整时在多个位置更改这些项目。
That boils down to this:
这归结为：
.sectionA{some general rules here}
#content{specific rules, and overrides for things in .sectionA}
Make sense?
有道理？
回答by Lan...
use: tag.id ; tag#classin the tag variables in your css.
使用：tag.id ; tag#class在你的 css 中的标签变量中。
回答by Eric Wendelin
You cancombine ID and Class in CSS, but IDs are intended to be unique, so adding a class to a CSS selector would over-qualify it.
您可以在 CSS 中组合 ID 和 Class，但 ID 旨在是唯一的，因此将类添加到 CSS 选择器会过度限定它。
回答by Ben Hughes
Ids are supposed to be unique document wide, so you shouldn't have to select based on both. You can assign an element multiple classes though with class="class1 class2"
Id 应该是唯一的文档范围，因此您不必基于两者进行选择。您可以为元素分配多个类class="class1 class2"
回答by Greg
I think you are all wrong. IDs versus Class is not a question of specificity; they have completely different logical uses.
我觉得你们都错了。IDs 与 Class 不是一个特殊性的问题；它们有完全不同的逻辑用途。
IDs should be used to identify specific parts of a page: the header, the nav bar, the main article, author attribution, footer.
ID 应该用于标识页面的特定部分：页眉、导航栏、主要文章、作者归属、页脚。
Classes should be used to apply styles to the page. Let's say you have a general magazine site. Every page on the site is going to have the same elements--header, nav, main article, sidebar, footer. But your magazine has different sections--economics, sports, entertainment. You want the three sections to have different looks--economics conservative and square, sports action-y, entertainment bright and young.
类应该用于将样式应用到页面。假设您有一个综合杂志网站。站点上的每个页面都将具有相同的元素——页眉、导航、主要文章、侧边栏、页脚。但是你的杂志有不同的版块——经济、体育、娱乐。你希望这三个部分有不同的外观——经济保守而方正，体育运动，娱乐明亮年轻。
You use classes for that. You don't want to have to make multiple IDs--#economics-article and #sports-article and #entertainment-article. That doesn't make sense. Rather, you would define three classes, .economics, sports, and .entertainment, then define the #nav, #article, and #footer ids for each.
你为此使用类。您不想制作多个 ID——#economics-article 和 #sports-article 和 #entertainment-article。那没有意义。相反，您可以定义三个类：.economics、sports 和 .entertainment，然后为每个类定义 #nav、#article 和 #footer id。
回答by Greg
.sectionA[id='content'] { color : red; }
Won't work when the doctype is html 4.01 though...
但是当 doctype 是 html 4.01 时不起作用......
