通过再应用一个css来覆盖一个css的效果

Question

我有2个css类，.c1和.c2，.c1适用{x}的padding-top和.c2的y，现在我想要{{1 }覆盖.c1应用的padding-top值。我该怎么做？我无法更改.c2，因此我必须覆盖.c2应用的某些属性值。

Answer 1

您可以将.c1的规则移到.c2以下：

.c2 { padding-top: 1em; }
.c1 { padding-top: 0.5em; }

或者如果您的元素同时包含两个类，请将该样式应用于both classes .c2.c1的其他选择器：

.c1 { padding-top: 0.5em; }
.c2 { padding-top: 1em; }
.c2.c1 { padding-top: 0.5em; }

如果您无法移动规则且无法设置多个类的样式，则最后的方法是使用!important：

.c1 { padding-top: 0.5em !important; }
.c2 { padding-top: 1em; }

Answer 2

您可以更改包含c1的选择器的specificity，或者如果您不想更改它，那么将它移动到c2下面或者最糟糕的情况是，为该属性添加!important。

特异性演示： http://jsfiddle.net/ADBAf/

div span.c1 {color:blue}
.c2 {color:red}

！重要演示： http://jsfiddle.net/ADBAf/1/

.c1 {color:blue !important}
.c2 {color:red}

Answer 3

看一下这篇关于css优先级的文章。也许它会帮助你http://hungred.com/useful-information/css-priority-order-tips-tricks/

Answer 4

一种方法是使用!important

.c2{
  background-color:white;
}
.c1{
  background-color:green !important;
}

将应用c1颜色

Answer 5

如果您无法控制规则的位置，请执行

.c1 { padding-top: 10px !important }

否则将.c1规则置于.c2之下就足够了（除非后者更具体）。

Answer 6

你必须在你的CSS中应用'重要'才能做到这一点

像这样： - .c1 {padding-top：5！important; } .c2 {padding-top：7; }