Есть несколько вещей, которые вы должны принять во внимание, одна или несколько из них могут иметь отношение к вашему конкретному случаю
Загрузите ваш CSS после PrimeFaces one
Youнеобходимо убедиться, что ваш CSS загружен после PrimeFaces.Вы можете добиться этого, поместив <h:outputStylesheet> ссылку на ваш файл CSS внутри <h:body> вместо <h:head>:
<h:head>
...
</h:head>
<h:body>
<h:outputStylesheet name="style.css" />
...
</h:body>
JSF автоматически переместит таблицу стилей в end сгенерировал HTML <head>, и это обеспечит загрузку таблицы стилей после стилей по умолчанию PrimeFaces.Таким образом, селекторы в вашем CSS-файле, точно такие же, как и в CSS-файле PrimeFaces, получат приоритет над PrimeFaces.
Вероятно, вы также увидите предложения по его размещению в <f:facet name="last"> из <h:head>что понимается в PrimeFaces HeadRenderer, но это неоправданно неоправданно и сломается, если у вас есть собственный HeadRenderer.
Понимание специфики CSS
Вы также должны убедиться, что вашСелектор CSS имеет значение , по крайней мере, , такое же, как селектор CSS по умолчанию PrimeFaces для конкретного элемента.Вы должны понимать CSS Specificity и Правила каскадирования и наследования .Например, если PrimeFaces объявляет стиль по умолчанию следующим образом:
.ui-foo .ui-bar {
color: pink;
}
, и вы объявляете его как
.ui-bar {
color: purple;
}
, а конкретный элемент с class="ui-bar" имеет родительский элемент сclass="ui-foo", тогда у PrimeFaces все равно будет приоритет, потому что это самое конкретное совпадение!
Вы можете использовать инструменты разработчика веб-браузера, чтобы найти точный селектор 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;
}
Если компонент не поддерживает styleClass и вы используете jsf 2.2 или выше, вы также можете использовать атрибуты передачи и добавить pt:class и запустите его на выходе.
<p:clock pt:class="borderless" />
Никогда не используйте! Important
В случае, если вам не удается правильно загрузить файл CSS по порядку или выбрать правильный селектор CSSвы, вероятно, возьмете !important обходной путь.Это просто неправильно.Это уродливый обходной путь, а не реальное решение.Это только сбивает с толку ваши правила стиля и себя больше в долгосрочной перспективе.!important должен only использоваться для переопределения значений, жестко закодированных в атрибуте style элемента HTML из файла таблицы стилей CSS (что, в свою очередь, также является плохой практикой, но, к сожалению, в некоторых редких случаяхнеизбежно).
См. также: