html - 无法应用新定义的 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;
}

或者在-part.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 的特异性，较高且优先。