设计特定组件的样式

Question

我正在尝试仅将样式应用于特定组件，但样式应用于整个页面而不仅仅是子视图。有没有办法只将样式应用于一个组件？

<f:subview>
    <ace:dialog id="pop" draggable="true" modal="true"
        visible="#{bean.popupVisible}" resizable="false"
        closeOnEscape="false" autoCentre="true" header="Details">
        <h:outputStylesheet>
            .ui-dialog-titlebar {
                width:400px;
            }
        </h:outputStylesheet>
...
</f:subview>

Answer 1

你的意思是只有.ui-dialog-titlebar当它是另一个元素吗？如果是的话，是的。你只需要像这样：

.parent-element .ui-dialog-titlebar {
  width: 400px;
}

这些样式仅适用于.ui-dialog-titlebar，当它位于.parent-element中时。