CSS |如何为特定组件实例创建选择器？

Question

假设我有一个组件的两个实例。我想要的是我的组件具有独特的外观，但不会更改该组件的所有其他实例。所以我需要为特定的组件实例创建选择器。

假设我的页面有这样的结构：

<af:panelGroupLayout id="pgl1" layout="scroll" styleClass="SpecialMarker">
  <af:inputText id="it1" label="Name"/>
</af:panelGroupLayout>

要在此容器中专门设置inputText的样式，我需要创建这样的蒙皮定义。这将仅影响组件的此特定实例：

.SpecialMarker af|inputText {background-color:pink}
.SpecialMarker af|inputText::access-key {color: aqua;}
.SpecialMarker af|inputText::content {background-color:red}
.SpecialMarker af|inputText::label {font-weight: bold}

但这对我没用。我的目标是根据屏幕宽度调整af：train（ADF）组件的大小。

P.S.I在Jdeveloper 11.1.1.7上使用ADF。

Answer 1

对于你给出的例子，你应该做

af|panelGroupLayout.SpecialMarker af|inputText {background-color:pink}
af|panelGroupLayout.SpecialMarker af|inputText::access-key {color: aqua;}
af|panelGroupLayout.SpecialMarker af|inputText::content {background-color:red}
af|panelGroupLayout.SpecialMarker af|inputText::label {font-weight: bold}

请注意，您可能需要在某些语句中添加！important以覆盖默认CSS。