JSF/CSS 属性选择器

Question

我有一个有两列的表。当第二列包含特定值时，我想使用 CSS 对第二列的值进行不同的样式设置。

这是视图：

<h:dataTable id="tb_USER_DETAILS" border="1" var="userDtls"
    value="#{freqViewTable.freqDtlsTable}" columnClasses="keydata, occupieddata"
    style="width: 250px" styleClass="overalltable">
    <h:column id="frequency">
        <f:facet name="header">
            <h:outputText value="Frequency (Hz)" style="font-size:12pt" />
        </f:facet>
        <h:outputText value="#{userDtls.keyFrequency}" style="font-size: 12pt"/>
    </h:column>
    <h:column id="slot">
        <f:facet name="header">
            <h:outputText value="Slot" style="font-size:12pt" />
        </f:facet>
        <h:outputText id="slotdata" value="#{userDtls.occupiedFlag}" style="font-size: 12pt"/>
    </h:column>
</h:dataTable>

css文件是：

table {
   background : Blue ;
}

table.overalltable th {
    background : Yellow;
}

table.overalltable tr {
    background : White;
}

table.overalltable .keydata {
    background : Orange;
}

table.overalltable .occupieddata {
    background : YellowGreen;
}

目前.occupieddata 是YellowGreen。我希望它是 Red 当值为“占用”时。类似于以下内容：

table.overalltable .occupieddata[occupiedFlag='Occupied'] {
    background : Red;
}

或者像这样：

table.overalltable .occupieddata[slotdata='Occupied'] {
    background : Red;
}

我怎样才能做到这一点？我正在使用以下技术：

• Java 1.6.0_22-b03
• JSF 1.2
• JSTL 1.2
• Eclipse 3.6.0 (Helios)
• Tomcat 6.0.28（也需要在 Weblogic 上运行）
• IE 7.0.5730.13
• 火狐：3.6.12

Answer 1

这行不通。您的 <h:outputText> 呈现 HTML <span> 元素，因为您在其上指定了 id 和 style 属性。如果你检查了生成的 HTML 代码，它应该是这样的

<td class="occupieddata"><span id="slotdata" style="font-size: 12pt">Occupied</span></td>

现在，您可以向其中添加另一个样式类，如下所示：

<h:outputText id="slotdata" value="#{userDtls.occupiedFlag}"
    style="font-size: 12pt" styleClass="#{userDtls.occupiedFlag}" />

所以结果是这样的：

<td class="occupieddata"><span id="slotdata" style="font-size: 12pt" class="Occupied">Occupied</span></td>

然后您可以将其设置为红色，如下所示：

table.overalltable .occupieddata .Occupied {
    background : Red;
}

顺便说一句，考虑将所有 style="font-size:12pt 移出标记到样式表中，它所属的位置。