是否可以将一个 CSS 类优先于另一个？答案

【问题标题】：Is it possible to give one CSS class priority over another?是否可以将一个 CSS 类优先于另一个？
【发布时间】：2011-04-09 22:48:38
【问题描述】：

假设我有一个使用两个 css 类的 div，这两个类都使用 text-align，但一个居中，另一个右对齐。

是否有可能指定一个类优先于另一个类的东西？

【问题讨论】：

标签： css

【解决方案1】：

指定更具体的选择器，例如在 ID 前面加上前缀或在类前面加上节点名
在其他类之后分配它
如果两个类在不同的文件中，则先导入优先文件
!重要

!important 是一种懒惰的方式，但你真的应该选择#1 以避免重要的感觉。一旦你添加了一个!important，你就不能用它来让其他规则变得更加更加重要了。

【讨论】：

+1 但我会切换 1 和 3； !important 与使用 CSS 特异性相比有点 hackey。
@Richard JP Le Guen：我正在查看旧的、已删除的答案，并在这里发现了我的 -1 答案。这些天来，我自动拒绝!important 的答案，这些答案也没有提及具体性。我要说我把它排除在我的答案之外，否则它最终会成为一个冗长的咆哮，但这只是一个借口;）
@BoltClock - 哇，已经有一段时间了（我看不到已删除的答案）但我真的记得评论过类似的东西！很高兴听到您现在是我们中的一员 - 很高兴知道您将我的反对票视为建设性批评的来源。为 SO 社区的其他人树立一个好榜样 :)
对建议 1 表示敬意。
当您使用 CSS 模块时，第 2 点是否适用？这似乎对我不起作用，一流的padding valie 盛行。见截图：imgur.com/gTRifYQ ps：我在 nextjs 和 react 和 bulma

【解决方案2】：

如果您想明确说明，您可以通过为包含这两个类的元素提供规则来指定这两个类的组合如何协同工作。例如，您可以显式地为 foo 和 bar 两个类提供与 bar 相同的样式，如下所示。这是因为.foo.bar 比.foo 更具体地用于具有两个类的元素，因此该规则将优先于.foo 规则。

.foo { text-align: center }
.bar, .foo.bar { text-align: right }

如果您不想这么明确，您可以将bar 的规则放在foo 的规则之后，因为给定相同特异性的选择器，后面的规则优先于前面的规则：

.foo { text-align: center }
.bar { text-align: right }

您可以在有关cascade 的CSS 规范章节中了解更多关于如何确定规则之间的优先级；那是 CSS 的“C”，为了充分利用 CSS，理解这一点很重要。

【讨论】：

【解决方案3】：

您应该使用 CSS 特殊性来覆盖之前的声明 http://htmldog.com/guides/cssadvanced/specificity/

p = 1 point
.column = 10 points
#wrap = 100 points

所以： p.column { text-align: right; } 可以被覆盖： body p.column { text-align: left; }

【讨论】：

很棒的文章。对于经常看到“特异性”但从未完全理解其含义的人来说，这就是液态黄金。当发生 CSS 冲突时，我终于有了一个数学规则可以应用。

【解决方案4】：

正如“meder omuraliev”所回答的，您可以使用更具体的选择器。我想提供一种通用方法来为任何类型的选择器指定更高的优先级，即使用 attr presdeo。

例如：

html body .foo { font-family: Arial !important;}
html body .bar[attr]{ font-family: Arial !important;}

要覆盖它，您可以这样使用：

html body .foo:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
html body .bar[attr]:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}

【讨论】：

【解决方案5】：

.bar { text-align: right !important;}

【讨论】：

【解决方案6】：

要添加到其他答案，您不需要添加与您最初想要增加特异性的选择器无关的选择器，可以通过多次重复相同的选择器来实现：

.foo.foo 优先于 .foo，.foo.foo.foo 优先于之前的。

这比添加不相关的选择器要好，因为你只选择你真正想选择的。否则，当您添加的无关内容发生更改时，您可能会出现意外行为。

【讨论】：

正是我需要的。我有.foo[class*="foo"][class~="foo"]，但这好多了，谢谢:)