Question

我在模板文件的head或<h:head>内添加了一个css文件，如下所示

<link rel="stylesheet" type="text/css" href="../resources/css/style.css" />

现在我想覆盖几个页面的这个css（style.css）文件的下面的类

.body-main{ width:800px; float:left;display: inline-block;}

我必须像这样使用

 .body-main{ width:90%; float:left;display: inline-block;}

创建另一个文件并使用!important的一种方法然后它会起作用，但我不想使用!important，有人可以建议任何其他方式。

我使用JSF / Facelet模板方法来创建页面

Answer 1

最重要的是，这里的规则就是。

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

Answer 2

层叠样式表最重要的核心功能之一是 Cascade 。

由于 Cascade ，以后应用于元素的规则将始终覆盖应用于同一元素的早期规则。

因此，如果你写：

.body-main {width: 800px; float: left; display: inline-block;}

.body-main {width: 90%;}

.body-main {width: 80%;}

.body-main {width: 70%;}

然后具有class="body-main"的元素的宽度为70%。

您为级联中的给定元素声明了多少规则并不重要 - 该元素的级联中的最后一个规则是将应用于该元素的规则。

Answer 3

更好的解决方案是给具有body-main类的元素赋予一些id 使用id选择器编写css，它将覆盖样式。

Answer 4

正如 @Allen 在他的回答中提到的，我尝试在同一个CSS文件中添加了像这样的css类

#body-main{ width:90%; float:left;display: inline-block;}

之前我正在使用

<div class="body-main">
.....
.....
.....
</div>

现在我正在使用

<div id="body-main">
.....
.....
.....
</div>

现在工作正常。