栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用自定义样式覆盖默认的PrimeFaces CSS?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用自定义样式覆盖默认的PrimeFaces CSS?

您需要考虑几件事,其中一项或多项可能与您的具体情况有关

PrimeFaces 之后加载CSS

您需要确保在

PrimeFaces
之后加载CSS 。您可以通过将
<h:outputStylesheet>
引用CSS文件
<h:body>
而不是放在其中来实现此目的
<h:head>

<h:head>    ...</h:head><h:body>    <h:outputStylesheet name="style.css" />    ...</h:body>

JSF将自动将样式表重新定位到生成的HTML 的末尾,从而确保在PrimeFaces的默认样式之后加载样式表。这样,CSS文件中与PrimeFaces CSS文件完全相同的选择器将优先于PrimeFaces一个。

你可能也看到建议把它

<f:facet name="last">的<h:head>
这是由
PrimeFaces
特定的理解
HeadRenderer
,但这是不必要的笨拙,当你有你自己会打破HeadRenderer。

了解CSS的特异性
您还需要确保CSS选择器至少与特定元素上的PrimeFaces默认CSS选择器一样具体。您需要了解CSS特殊性以及级联和继承规则。例如,如果PrimeFaces默认声明一个样式,如下所示

.ui-foo .ui-bar {    color: pink;}

然后您将其声明为

.ui-bar {    color: purple;}

并且特定的元素class=”ui-bar”恰好具有的父元素class=”ui-foo”,那么PrimeFaces的元素仍将优先,因为这是最具体的匹配!

您可以使用webbrowser开发人员工具查找确切的CSS选择器。在网络浏览器(IE9 / Chrome / Firefox + Firebug)中右键单击有问题的元素,然后选择“ 检查元素”以查看它。

部分覆盖

如果您只需要为组件的特定实例而不是同一组件的所有实例覆盖样式,则添加一个自定义styleClass并在该钩子上进行钩挂。这是使用/应用特异性的另一种情况。例如:

<p:dataTable styleClass="borderless">.ui-datatable.borderless tbody,.ui-datatable.borderless th.ui-datatable.borderless td {    border-style: none;}

如果某个组件不支持a styleClass并且您使用的是jsf 2.2或更高版本,则还可以使用passtrough属性并添加a pt:class并将其最终输出。

<p:clock pt: />

切勿使用!重要
万一您无法正确地加载CSS文件,或者找不到正确的CSS选择器,您可能会抓住!important解决方法。这是错误的。这是一个丑陋的解决方法,而不是真正的解决方案。从长远来看,它只会使您的样式规则和您自己更加困惑。本!important应只以覆盖HTML元素的硬编码值被用来style从一个CSS样式表文件属性(这反过来也是一个不好的做法,但在某些罕见的情况下不幸的是不可避免的)。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432578.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号