时间戳

首页 > 解决方案 > 如何为两个不同的 Primefaces 组件使用自定义 CSS

css - 如何为两个不同的 Primefaces 组件使用自定义 CSS

问题描述

我想对两个不同但属于同一类型的组件使用两个不同的 CSS 规则。例如下面的代码是 primefaces 中面板网格的默认代码。我有两个不同的 panelGrids（gridOne 和 gridTwo），我希望它们可以有不同的 CSS。我曾尝试使用不同的 CSS 规则在 XHTML 代码中使用 styleClass，但有人可以给出提示。我已经阅读了 CSS specificity 文档，但我仍然有点困惑，因为两个网格最终共享相同的 CSS 规则（尤其是当我添加!important时）

 .ui-panelgrid .ui-panelgrid-cell {
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  padding: 4px 10px;
  }


 .gridOne,.ui-panelgrid .ui-panelgrid-cell {
  border-width: 1px;
  border-style: solid;
  border-color: red;
  padding: 0px;
  }


 .gridOne,.ui-panelgrid .ui-panelgrid-cell, .gridOne {
 border-width: 1px;
 border-style: solid;
 border-color: red;
 padding: 0px;
  }

  }

 .gridTwo,.ui-panelgrid .ui-panelgrid-cell {
  border-width: 0px;
  border-style: none;
  border-color: none;
  padding: 2px 5px;
  }


.gridTwo,.ui-panelgrid .ui-panelgrid-cell,.gridTwo{
 border-width: 0px;
 border-style: none;
 border-color: none;
 padding: 2px 5px;

 }

标签： css

解决方案

您可以选择这样的特定课程

/* All elements with class="ui-panelgrid or ui-panelgrid-cell " */
  .ui-panelgrid .ui-panelgrid-cell {
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    padding: 4px 10px;
  }

/* All gridOne elements with class="ui-panelgrid or ui-panelgrid-cell " */
.gridOne.ui-panelgrid .ui-panelgrid-cell {
    border-width: 1px;
    border-style: solid;
    border-color: red;
    padding: 0px;
  }

/* All gridTwo elements with class="ui-panelgrid or ui-panelgrid-cell " */
.gridTwo.ui-panelgrid .ui-panelgrid-cell {
    border-width: 0px;
    border-style: none;
    border-color: none;
    padding: 2px 5px;
  }

推荐阅读