是否可以将一个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规范章节中了解有关规则优先级如何确定cascade的更多信息;这是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

正如“ meder omuraliev”回答的那样，您可以使用更指定的选择器。并且我想提供一种通用的方式，即如何为att 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;}

Answer 5

NA