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

Question

假设我有一个使用两个css类的div,它们都使用text-align,但是一个是居中的,另一个是右对齐的.

是否可以指定一个优先于另一个优先级的东西？

Answer 1

1. 指定一个更具体的选择器,例如在它之前加上前缀ID或在类之前加上节点前缀
2. 在另一个课程之后分配它
3. 如果两个类在单独的文件中,则导入第二个优先级文件
4. !重要

!important是懒惰的方式,但你真的应该去#1避免重要的意义.一旦你添加了一个,!important你就无法使用它来使其他规则变得更加重要.

Answer 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 }

您可以在有关级联的CSS规范章节中了解有关如何确定规则之间优先级的更多信息; 那是CSS的"C",为了充分利用CSS,很清楚这一点很重要.

Answer 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; }

Answer 4

正如 \xe2\x80\x9cmeder omuraliev\xe2\x80\x9d 已回答的那样，您可以使用更指定的选择器。我想提供一种通用方法，如何为任何类型的选择器指定更高的优先级，即使用 attr presdeo。

\n\n

例如：

\n\n

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

\n\n

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

\n\n

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

\n

Answer 5

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

.foo.foo优先于.foo，并且.foo.foo.foo优先于前面的。

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