如何在 CSS 选择器中组合类和 ID？

Posted 2023-03-06

【中文标题】如何在 CSS 选择器中组合类和 ID？

【英文标题】：How to combine class and ID in CSS selector?

【发布时间】：2010-11-04 22:07:53

【问题描述】：

如果我有以下 div：

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

有没有办法定义一种风格来表达“带有id='content' AND class='myClass' 的div”的想法？

或者你只是像在

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

或者

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

【问题讨论】：

如果你要按 id 选择，那么也不需要按类选择，因为 id 是唯一的，所以只有一个元素会匹配。因此，将类添加到同一个选择器只是额外的输入

@TStamper：不一定。您只考虑静态文档。例如，您的页面上可能有一个 img#Inbox 图标，该图标通常设置为 50% 的不透明度。但是，当用户有消息时，您希望将其设置为 100% 不透明度，并且后端通过向元素添加 active 类来指示这一点。在这种情况下，拥有一个结合了 ID 和类名的选择器确实很有意义。

@TStamper：另外，没有更具体的 id+class 组合选择器比单独的 id 版本赋予它更多的权重/优先级吗？ AFAIK，它应该。 （IOW，id+class 组合选择器的规则将覆盖 id 组合选择器的规则。（这是我刚刚找到这个线程的原因/需要。）

所以，我也有类似的情况。例如，我有许多产品都有描述，但也希望对单个产品进行特定控制，所以，我可以这样做：code

【参考方案1】：

在您的样式表中：

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 添加了您不需要的过滤步骤。 只在必须的地方使用选择器中的标签名！

【讨论】：

指定 ID 属于 div 只会损害渲染性能（尽管几乎可以忽略不计），因为 ID 已经是唯一的，因此对它没有任何好处。我会使用 #content.myClass 来让它变得干净。

div.class#id 应该是等价的，但不太推荐；首先使用选择器的更多独特部分。

感谢您的努力，即使在多年之后 :)。还在帮助像我这样的人。刚刚将它用于我的项目。肯定赞成。

【参考方案2】：

#header .callout 和 #header.callout 在 css 中存在差异。

这是#header .callout的“简单英语”： 选择类名称为 callout 且是 ID 为 header 的元素的后代的所有元素。

而#header.callout 的意思是： 选择ID为header，类名为callout的元素。

您可以在这里阅读更多内容css tricks

【讨论】：

我用空格犯了这个错误：#id .class vs #id.class

【参考方案3】：

在一个元素上组合一个 id 和一个类并没有错，但你不需要为一个规则同时识别它。如果你真的愿意，你可以这样做：

#content.sectionAsome rules

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

一般来说，特定于该元素的 CSS 规则应使用 ID 设置，并且这些规则将比仅类的那些具有更大的权重。类指定的规则将是应用于多个项目的属性，您不想在需要调整的任何时候在多个位置进行更改。

归结为：

 .sectionAsome general rules here
 #contentspecific rules, and overrides for things in .sectionA

有意义吗？

【参考方案4】：

通常你不需要对 id 指定的元素进行分类，因为 id 总是唯一的，但如果你真的需要，以下应该可以工作：

div#content.sectionA 
    /* ... */

【参考方案5】：

ID 应该在文档范围内是唯一的，因此您不必同时基于两者进行选择。您可以使用class="class1 class2" 为一个元素分配多个类

【讨论】：

类可以改变。例如，您可以拥有 div#id.active 和 div#id.inactive。

很公平，想想看，我已经使用过这个功能，但我误解了想要的行为是什么。

【参考方案6】：

您可以在 CSS 中组合 ID 和 Class，但 ID 旨在是唯一的，因此将 class 添加到 CSS 选择器会过度限定它。

【讨论】：

这很好。我在想，如果你有一组非常通用的类（设置浮动、高度/宽度，可能还有字体等），并且你想在这个独特的异常中覆盖其中的某些内容？

除非您对不同的页面使用相同的样式表。 :-)

另一个例子：使用 javascript (#optionalFields.enabled) 动态添加类时

即使你在不同的页面上使用相同的样式表，最好在正文上放置一个类或为 ID 设置一种样式，然后使用适当的分隔类的类定义覆盖样式。

是的，我认为这样做很常见。例如 li#SomeTab.state-selected

【参考方案7】：

我认为你们都错了。 IDs vs Class 不是一个具体的问题；它们有完全不同的逻辑用途。

应使用 ID 来标识页面的特定部分：页眉、导航栏、主要文章、作者署名、页脚。

应使用类将样式应用于页面。假设您有一个通用杂志网站。网站上的每个页面都将具有相同的元素——页眉、导航、主文章、侧边栏、页脚。但是你的杂志有不同的栏目——经济、体育、娱乐。您希望这三个部分具有不同的外观 - 经济保守和方形，体育动作 - 娱乐，明亮和年轻。

您为此使用类。您不想创建多个 ID——#economics-article 和 #sports-article 和 #entertainment-article。那没有意义。相反，您将定义三个类：.economics、sports 和 .entertainment，然后为每个类定义 #nav、#article 和 #footer id。

【讨论】：

对于您提到的大多数元素，您实际上可以使用语义 html 标记而不是 ID。页眉、页脚、导航、部分等标签的存在是有原因的。

但实际上你应该只对应该是唯一的元素使用 ID，单例。但即便如此，它也只有在您需要通过 JavaScript 访问该元素时才真正有用，因为使用 ID 会使您的 CSS 过于具体，以后难以与其他 CSS 和/或 HTML 合并。也有人认为 ID 比类更快，但差异确实可以忽略不计。

【参考方案8】：

在你的css的标签变量中使用：tag.id ; tag#class。

【讨论】：

我觉得你有点混淆了 - tag.class 和 tag#id，不是吗？

【参考方案9】：

继续 Ajm 的回答：

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

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



/* This is to validate something like: */

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



/* AND */

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



/* etc. */

【参考方案10】：

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

当文档类型为 html 4.01 时将无法工作...