CSS에서 콜론 포함 ID를 사용하여 JSF 구성 요소의 스타일을 지정하는 방법은 무엇입니까?

CSS 선택기에서 콜론을 사용하여 JSF 생성 식별자를 대상으로 지정하는 방법

JSF 애플리케이션에서 구성 요소는 콜론이 포함된 클라이언트 ID로 렌더링될 수 있습니다. "phoneForm:phoneTable"과 같습니다. 이러한 콜론은 의사 클래스를 나타내기 위해 콜론을 사용하는 CSS 선택기의 구문과 충돌할 수 있습니다.

1. 콜론 탈출:

백슬래시()를 사용하여 콜론을 탈출합니다. 이는 대부분의 브라우저에서 작동합니다.

#phoneForm\:phoneTable {
    background: pink;
}

2. 공백으로 이스케이프된 백슬래시 사용:

IE6/7에서 이스케이프된 콜론에는 후행 공백이 필요합니다.

#phoneFormA phoneTable {
    background: pink;
}

3. 기본 요소로 래핑:

JSF 구성 요소를 일반 HTML 요소로 래핑하고 래퍼에 스타일을 적용합니다.

<h:form>

#phoneField table {
    background: pink;
}

4. 대신 클래스 사용:

구성 요소에 ID 대신 CSS 클래스를 할당합니다. 이렇게 하면 결장 문제가 해결됩니다.

<h:dataTable>

.pink {
    background: pink;
}

5. JSF 구분 기호(JSF 2.x) 변경:

web.xml의 JSF UINamingContainer 구분 기호를 콜론 대신 하이픈(-)으로 수정합니다.

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

#phoneForm-phoneTable {
    background: pink;
}

6. 양식 ID 앞에 추가 비활성화(JSF 1.2 ):

구성 요소 ID에 양식 ID 앞에 추가를 비활성화합니다. 그러나 이는 AJAX 처리에 문제를 일으킬 수 있으므로 권장되지 않습니다.

    <h:dataTable>

#phoneTable {
    background: pink;
}

권장사항:

특정 사례의 경우 다음과 같은 CSS 클래스를 사용하세요. "phoneTable"은 유연성을 제공하고 JSF 이름 지정 컨테이너와의 잠재적인 충돌을 방지하므로 가장 적합한 솔루션입니다.

위 내용은 CSS에서 콜론 포함 ID를 사용하여 JSF 구성 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!