无法应用新定义的CSS规则

Question

我无法理解如何应用CSS规则。

对于div中的段落，我想应用这个新定义的规则：

.imgDescription {
    position: absolute;
    right: 10px;
    color: #000; 
}

但该段落仍由前面的规则设定：

.dark-wrapper .inner p {
    font-family: 'Open Sans';
    font-size:14px;
    color:#CCC;
}

我不知道如何解决这个问题。

Answer 1

您可以在样式中添加!important。

.imgDescription {
    position: absolute !important;
    right: 10px !important;
    color: #000 !important;
}

或定义.imgDescription - 部分下的.dark-wrapper .inner p。据我所知，CSS定义根据定义中的顺序加权。纠正我，如果我在这里错了......

Answer 2

您需要了解CSS规则的工作原理，即级联和特异性。

您可以阅读：http://www.w3.org/TR/CSS2/cascade.html

在您的情况下，您需要使新规则更具体，以便它覆盖先前定义的规则。

在您的示例中，您需要：

.dark-wrapper .inner p {
    font-family: 'Open Sans';
    font-size:14px;
    color:#CCC;
}

.dark-wrapper .inner p.imgDescription {
    position: absolute;
    right: 10px;
    color: #000; 
}

.dark-wrapper .inner p的特异性为0,0,2,1

.dark-wrapper .inner p.imgDescription具有0,0,3,1的特异性，它更高并且优先。