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

Question

如何在同一页面中使用不同的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;
}

知道如何解决此问题

Answer 1

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

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

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

Answer 2

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