如何覆盖作为复合组件一部分的标签的 CSS？

Posted 2023-02-22

【中文标题】如何覆盖作为复合组件一部分的标签的 CSS？

【英文标题】：How to override CSS for a label that is part of a composite component?

【发布时间】：2019-12-07 10:01:29

【问题描述】：

我是 CSS 新手，有一个问题，我似乎找不到任何答案。我有一个复合组件，基本上是一个Primefaces Checkbox，这是一个复合组件，对于这个元素我想增加标签的宽度。

我尝试将 styleClass="myStyle" 添加到我的复选框，然后在 CSS 中：

.fullPanel.test label
   width:25%;  

这是我的复选框：

<gcc:checkBox id="angabenKorrekt" label="#messages['checkBoxLabel']"
            value="#bean.checkBox" />

在检查时看起来我生成的页面： html inspector

基本上，我希望能够更改某些 UI 元素的默认 CSS。目前样式来自： .fullPanel .inputBox 标签，如打印屏幕所示。

【问题讨论】：

在您添加的关于 HTML 检查器的图像中，具有“fullPanel”类的 div 没有“test”类，因此该 CSS 规则不适用于那里。

【参考方案1】：

这应该根据您的 html 检查器起作用，只有在没有其他方法时才使用 !important。

.fullPanel .inputBox label
   width:25%;  

【讨论】：

这样我将更改所有复选框的宽度，对吗？我只想更改选定的。

这将更改 .inputbox 下具有父 fullPanel 的所有标签 - 如果你想限制添加一个类到 fullPanel 并将其用作选择器，那么只会影响特定的。跨度>