CSS 선택기에서 요소 ID의 콜론 처리

CSS 선택기에서 요소 ID의 콜론 처리

---

이 질문에는 이미 답변이 있습니다.

• CSS 선택기에서 콜론“:”과 함께 JSF 생성 HTML 요소 ID를 사용하는 방법은 무엇입니까? 답변 2 개

JSF가 입력 필드의 ID를로 설정했습니다

search_form:expression

. 해당 요소에 스타일을 지정해야하지만 콜론은 브라우저에서 의사 요소의 시작 부분처럼 보이므로 유효하지 않고 무시됩니다. 어쨌든 콜론이나 무언가를 피할 수 있습니까?

input#search_form:expression {
  ///...
}

---

백 슬래시 :

input#search_form\:expression {  ///...}

• 참조 CSS와 네임 스페이스를 사용 (MSDN)

---

콜론 앞에 백 슬래시를 사용하는 것은 많은 IE 버전 (특히 6 및 7, 다른 버전에서는)에서 작동하지 않습니다.해결 방법은 콜론에 16 진수 코드 (\ 3A)를 사용하는 것입니다.예:

input#search_form\3A expression {  }

이것은 IE6 + (및 이전 버전?), Firefox, Chrome, Opera 등을 포함한 모든 브라우저에서 작동합니다. 이것은

CSS2 표준

의 일부입니다 .

---

이 기사에서는

CSS에서 문자를 이스케이프 처리하는 방법에 대해 설명합니다.이제 그것을위한 도구도 있습니다 :

http://mothereff.in/css-escapes#0search%5fform%3Aexpression

TL; DR이 질문에 대한 다른 모든 답변은 잘못되었습니다. 밑줄 (일부 경우에는 IE6이 규칙을 무시하지 못하도록 방지)과 선택기가 다른 브라우저에서 제대로 작동하도록하려면 콜론 문자를 모두 이스케이프 처리해야합니다.기술적으로 콜론 문자는로 이스케이프 할 수

\:

있지만 IE <8에서는 작동하지 않으므로

\3a

다음 을 사용해야합니다 .

#search\_form\3a expression {}

---

백 슬래시로 벗어날 수 있습니다

input#search_form\:expression {
  ///...
}

로부터

CSS 사양

4.1.3 문자와 대소 문자다음 규칙이 항상 적용됩니다.CSS로 제어되지 않는 부분을 제외하고 모든 CSS 스타일 시트는 대소 문자를 구분하지 않습니다. 예를 들어 HTML 속성 "id"및 "class", 글꼴 이름 및 URI 값의 대소 문자 구분은이 사양의 범위를 벗어납니다. 특히 요소 이름은 HTML에서 대소 문자를 구분하지만 XML에서는 대소 문자를 구분합니다. CSS에서 식별자 (요소 이름, 클래스 및 선택기의 ID 포함)는 문자 [a-z0-9] 및 ISO 10646 문자 U + 00A1 이상과 하이픈 (-) 및 밑줄 (_) 만 포함 할 수 있습니다. ; 숫자로 시작하거나 하이픈과 숫자로 시작할 수 없습니다. 식별자는 이스케이프 문자와 ISO 10646 문자를 숫자 코드로 포함 할 수도 있습니다 (다음 항목 참조). 예를 들어 식별자 "B & W?" "B \ & W \?"로 표시 될 수 있습니다. 또는 "CSS 2.1에서 백 슬래시 () 문자는 세 가지 유형의 문자 이스케이프를 나타냅니다. 먼저 문자열 내에서 백 슬래시 다음에 개행 문자가 무시됩니다 (즉, 문자열에 백 슬래시 또는 개행 문자가 포함되지 않은 것으로 간주 됨).둘째, 특수 CSS 문자의 의미를 취소합니다. 16 진수를 제외한 모든 문자는 백 슬래시로 이스케이프 처리하여 특수한 의미를 제거 할 수 있습니다. 예를 들어, "\" "는 큰 따옴표로 구성된 문자열입니다 스타일 시트 프리 프로세서는 스타일 시트의 의미를 변경하기 때문에 스타일 시트에서 이러한 백 슬래시를 제거해서는 안됩니다.셋째, 백 슬래시 이스케이프를 사용하면 작성자가 문서에 쉽게 넣을 수없는 문자를 참조 할 수 있습니다. 이 경우 백 슬래시 뒤에 최대 6 개의 16 진 숫자 (0..9A..F)가옵니다.이 숫자는 해당 숫자의 ISO 10646 ([ISO10646]) 문자를 나타내며 0이 아니어야합니다. (CSS 2.1에서는 스타일 시트에 유니 코드 코드 포인트가 0 인 문자가 포함 된 경우 어떤 일이 발생하는지 정의되어 있지 않습니다.) [0-9a-f] 범위의 문자가 16 진수 뒤에 오는 경우 숫자의 끝을 만들어야합니다. 명확한. 이를 수행하는 두 가지 방법이 있습니다.공백 (또는 다른 공백 문자)이있는 경우 : "\ 26 B"( "& B"). 이 경우 사용자 에이전트는 "CR / LF"쌍 (U + 000D / U + 000A)을 단일 공백 ​​문자로 취급해야합니다. 정확히 6 자리 16 진수를 제공하여 : "\ 000026B"( "& B") 실제로이 두 가지 방법을 결합 할 수 있습니다. 16 진 이스케이프 후 하나의 공백 문자 만 무시됩니다. 이것은 이스케이프 시퀀스 뒤의 "실제"공간 자체가 이스케이프되거나 두 배가되어야한다는 것을 의미합니다.숫자가 유니 코드에서 허용되는 범위를 벗어난 경우 (예 : "\ 110000"이 현재 유니 코드에서 허용되는 최대 10FFFF보다 높음) UA는 이스케이프를 "대체 문자"(U + FFFD)로 바꿀 수 있습니다. 문자가 표시 될 경우 UA는 "누락 된 문자"글리프 (참조 : 15.2, 포인트 5)와 같은 보이는 기호를 표시해야합니다.참고 : 허용되는 경우 백 슬래시 이스케이프는 항상 식별자 또는 문자열의 일부로 간주됩니다 (예 : "{"가 있고 "\ 32"가 시작하더라도 "\ 7B"는 문장 부호가 아닙니다) "2"가 아니더라도 클래스 이름). 식별자 "te \ st"는 "test"와 정확히 동일한 식별자입니다.

---

콜론에 동일한 문제가 있었고 콜론을 출력하는 코드에 액세스 할 수없는 콜론을 변경할 수 없었으며 jQuery를 사용하여 CSS3 선택기로 가져오고 싶었습니다. 나는 여기에 두었다가 누군가에게 도움이 될 수 있기 때문에

input[id="something:something"]

jQuery 선택기에서 잘 작동했으며 스타일 시트에서도 작동 할 수 있습니다 (브라우저 문제가있을 수 있음)

---

JSF 2,0에서는 web.xml 파일을 javax.faces.itPAR의 초기화 매개 변수로 사용하여 구분 기호를 지정할 수 있습니다.이것을 읽으십시오 :

• JSF에서 요소 ID 구분 기호를 변경할 수 있습니까?

---

나는 ADF 프레임 워크에서 일하고 종종 요소를 선택하기 위해 JQuery를 사용해야합니다. 이 형식은 저에게 효과적입니다. 이것은 IE8에서도 작동합니다.

$('[id*="gantt1::majorAxis"]').css('border-top', 'solid 1px ' + mediumGray);

---

이 형식 만 IE7 (Firefox에서도)에 적합하다는 것을 알았으며 JSF / Icefaces 1.8.2를 사용합니다.

양식 id = FFF, 요소 id = EEE

var jq = jQuery.noConflict ();
jq (문서) .ready (함수 () {
jq("[id=FFF:EEE]").someJQueryLibFunction({ jQuery lib function options go here })
});

참고URL : https://stackoverflow.com/questions/122238/handling-a-colon-in-an-element-id-in-a-css-selector