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>

#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 앞에 추가를 비활성화할 수 있습니다:

<h:form prependId="false">
  <h:dataTable>

그러나 이 접근 방식은 AJAX에 영향을 미칠 수 있으므로 권장되지 않습니다. 기능.

5. CSS 클래스 사용:

<h:dataTable>

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

권장 사항:

대부분의 경우 "" 문자를 사용하여 콜론을 이스케이프하는 것이 좋습니다. 이는 간단하고 브라우저 간 호환 가능한 솔루션입니다.

위 내용은 CSS 선택기에서 JSF 생성 콜론을 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!