Question

我使用的是primefaces 5.1，作为Java程序员，我有很多难以处理的CSS类。例如，我想覆盖一些删除DIV圆角的CSS属性，重新命名为：

＆＃13;

<div style="position: absolute; margin: 0px; top: auto; width: auto; z-index: 0; bottom: 0px; left: 0px; right: 0px; display: block; visibility: visible; height: 16px;" id="j_idt28" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-south footer ui-layout-pane ui-layout-pane-south">
    <div style="position: relative; visibility: visible; height: 15px;" class="ui-layout-unit-content ui-widget-content">
    <span style="color:#000000;background-color:#FFFF00;font-size:small;">This is a text inside a div!</span>
    </div>
</div>

＆＃13;

请注意，上面的DIV使用了很多CSS类，包括我的类 footer ，它在我的CSS中声明为：

＆＃13;

.footer .ui-layout-unit-content {
	background-color: #FFFF00 !important;
	padding: 0px !important;
	border-radius: 0px;
}

＆＃13;

我可以将背景绘制为黄色，但其他属性不能被覆盖。我做错了什么？

Answer 1

为了覆盖先前定义的规则，您必须增加特异性。

特定性是浏览器决定哪个属性的方法   值与元素最相关并且可以应用。   特异性仅基于由组成的匹配规则   选择不同的种类。

如何计算？

特异性计算在   每个选择器类型的计数的连接。这不是重量   应用于相应的匹配表达式。

在特异性平等的情况下，发现最新的声明   CSS应用于元素。

所以你的规则可以写成：

.footer.ui-layout-pane .ui-layout-unit-content.ui-widget-content {
    background-color: #FFFF00 !important;
    padding: 0px !important;
    border-radius: 0px;
}

参考：MDN

Answer 2

在emmanuel的帮助下，解决方案很简单：还有另一个类为圆角DIV设置CSS属性，所以我覆盖它：

.footer.ui-layout-pane .ui-layout-unit-content.ui-widget-content {
    background-color: #FFFF00;
    padding: 0px;
}

.footer.ui-corner-all {
    border-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.footer.ui-widget-content {
    background-color: #FFFF00;
    padding: 0px;
}

Answer 3

使用元素检查器查找哪些类正在应用该样式，然后使用它覆盖它 !important规则。例如：border-radius: 0px !important;

如何覆盖一些CSS类设置

3 个答案: