css - 如何给 a specific background color in CSS?

Question

我有一个 <p:dataTable> :

<p:dataTable styleclass="mylist" style="font-size: 11pt;width: 100%;" rowKey="#{tech.ccode}"  value="#{recommendedTech.rectech}" selectionMode="single" selection="#{selectedCourses.tecobj}" var="tech">
        <p:ajax event="rowSelect" update=":form:form:main:"  listener="#{selectedCourses.techRowselect}"/>
        <f:facet name="header">
            <label style="font-size: 12pt">Recommended Technical Courses</label>
        </f:facet>
        <p:column headerText="Technology Name">
            <p:outputLabel  value="#{tech.cname}"/>
        </p:column>
        <p:column headerText="Course Code">
            <p:outputLabel  value="#{tech.ccode}"/>
        </p:column>
        <p:column headerText="Add To MyCourse">
            <span class="button-success" title="Click To Add To Mycourse" onclick="setTimeout(function() {alert('Selected Course Added To My Course Successfuly');},1000);"  style="color: green">Click here</span>
        </p:column>
    </p:dataTable>

我想给<p:dataTable>特定的背景颜色，例如红色的。我尝试添加 styleclass="mylist"使用以下 CSS 类:

.mylist {
    background-color: red;
}

然而，它没有任何效果。我怎样才能让它发挥作用？

Answer 1

dataTable 背景(主要)由 ui-widget-content 和 ui-datatable-odd/even 样式定义。如果你想覆盖它们，你需要使用这样的东西:

<style>
    .mylist tr.ui-widget-content, .mylist tr.ui-datatable-odd, .mylist ui-datatable-odd {
        background-color: red;
    }
</style>

在这种情况下，mylist 类将仅用于标记适当的数据表。

查看更多关于覆盖 primefaces CSS 值的信息 here .