如何在 CSS 選擇器中處理 JSF 產生的冒號？

JSF 產生的HTML 元素ID：CSS 選擇器中的轉義冒號

使用JSF (JavaServer Faces) 時，您可能會遇到HTML 元素ID用冒號(:) 產生。使用 CSS 選擇器時，這可能會導致問題，其中冒號表示偽選擇器的開始。

殖民 ID 的起源：

JSF 透過以下方式產生 HTML 元素的客戶端 ID：預設格式為「FormID:ElementID」。這是處理 JSF 應用程式中 ID 衝突的便捷方法。

CSS 選擇器問題：

不幸的是，CSS 選擇器中的冒號代表偽選擇器的開始，例如 :hover 或 :first-child。嘗試使用像 #FormID:ElementID 這樣的選擇器將導致錯誤。

解：

1.用「」或「3A」轉義冒號：

#FormID\:ElementID {
  /* CSS styles */
}

#FormIDA ElementID {
  /* CSS styles */
}

2.使用有普通ID 的HTML包裝器：

<div>
<pre class="brush:php;toolbar:false">#phoneWrapper table {
  /* CSS styles */
}

3.更改UINamingContainer 分隔符號：

在JSF 2.x 中，您可以修改web.xml的context-param部分中的預設分隔符號：

<context-param>
  <param-name>javax.faces.SEPARATOR_CHAR</param-name>
  <param-value>-</param-value>
</context-param>

這將更改將產生的 ID 更改為“FormID-ElementID”，使其與 CSS 選擇器更加相容。

4.停用表單ID 的前置：

在JSF 1.2 或更高版本中，您可以透過在h:form 標記中加入prependId="false " 來停用表單ID 的前置：

<form prependid="false">
  <datatable></datatable>
</form>

但是，不建議使用這種方法，因為它會影響 AJAX 功能。

5.使用CSS類：

<datatable></datatable>

.phone-table {
  /* CSS styles */
}

建議：

對於大多數情況，建議使用“”字元轉義冒號。這是一個簡單且跨瀏覽器相容的解決方案。