css - 如何在同一个页面中使用不同的CSS

Question

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

例如，我在同一个页面中有两个 primefaces header ，我想为它们应用不同的 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;
}

想知道如何解决这个问题

Answer 1

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

这个概念被称为层叠，在 CSS 规范中有描述:

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