0

如何在同一页面中使用不同的 CSS？

例如，我在同一页面中有两个 primefaces 标题，我想为它们应用不同的 CSS。

有没有办法做到这一点？当我尝试在 head 标签内添加以下行时，其中只有一个在工作。

<h:outputStylesheet library="css" name="myheader1.css" />
<h:outputStylesheet library="css" name="myheader2.css" />

CSS 文件：

.ui-layout-unit-header{
    font-size: 20px;
    border: none;
    text-align: center;
    background-color: buttonface !important;
}

.ui-layout-unit-header{
    font-size: 10px;
    border: none;
    text-align: center;
    background-color: buttonface !important;
}

任何想法如何解决这个问题

4

2 回答 2

3

如果您的两个 CSS 规则具有相同的选择器，则加载到第二个样式表中的第二个将被使用。

这个概念被称为级联，并在 CSS 规范中描述：

http://www.w3.org/TR/CSS2/cascade.html#cascade

于 2013-09-11T14:04:00.737 回答
1

你不能，页面上的所有 CSS 都将被应用（HTML“不知道”这个过程），并且具有最高特异性的单个规则将起作用。特异性由选择器和它们在文档中出现的顺序决定。这是级联的一部分。

于 2013-09-11T14:08:30.647 回答