p: tree TreeNode background-color

У меня сценарий: Я хочу создать сайт с помощью PrimeFaces. Следующий раздел выглядит белым, но он должен быть красным.p: tree TreeNode background-color

 <p:tree value="#{index.root}" var="node" style="width: 100%"> 
      <p:treeNode type="FAIL" styleClass="fail"> 
       <span style="cursor: pointer;" 
        onclick="this.parentNode.parentNode.firstChild.click();"> <h:outputText 
         value="#{node}" /> <h:commandButton value="Mark as handled" /> 
       </span> 
      </p:treeNode> 
     </p:tree>

index.css

.fail { 
    background-color: red; 
    color: white; 
}

Исследуя TreeNode в Firefox инспектора я вижу следующую структуру

Если я снимите цвет фона: прозрачный из .ui- tree .ui-tree-node, дерево отображается красным (как и должно быть).

Кто-нибудь знает, почему браузер проявляет это поведение и как я могу это исправить?

спасибо.

источник

2016-01-05 nucandrei

Это работает, если вы поместите 'background-color: # F00! Important;'? В противном случае, я думаю, вам нужно будет установить css для одного и того же класса. '.ui-tree .ui-treenode'. – DaMaGeX

@DaMaGeX Кажется, что работает с фоном: # F00! Important; но я читал, что использование! важно не рекомендуется. Я не могу использовать второй подход, потому что я хочу, чтобы некоторые узлы дерева имели разные цвета. – nucandrei

Ну, тогда вы либо отредактируете источник Primeface, либо просто поместите! Important. Если вы уверены, что никто другой не собирается строить еще один мод поверх этого, тогда все в порядке. Просто имейте в виду, чтобы вы не мешали часам поиска, почему вещи не меняются. Кроме этого, важно. – DaMaGeX

Как мы работали в комментариях ниже вопрос, используйте

.ui-tree .ui-treenode.fail

перезаписать правила Primeface CSS. Это связано с тем, что селектор является более конкретным. Как сказал в своем ответе Тим Шок.

источник

2016-01-05 13:38:36 DaMaGeX

Причина в том, что .fail менее специфичен, чем .ui-tree .ui-tree-node. Отметьте https://css-tricks.com/specifics-on-css-specificity/ и https://specificity.keegan.st/, чтобы узнать, как работает спецификация css.

источник

2016-01-05 13:26:29

p: tree TreeNode background-color

ответ

Смежные вопросы