2010-08-12 2 views
3

HTML 요소의 클래스 속성에 잘못된 CSS 클래스 문자 (@, :, !)를 넣는 데 알려진 문제가 있습니까? 이처럼 :HTML 요소의 class 속성에 잘못된 CSS 문자 (`@`,`:`,`!`)를 넣는 것과 관련된 알려진 문제점이 있습니까?

<input type='text' class='compare id:txtSecondary'/> 
<input type='text' class='compare @txtSecondary'/> 
+1

나는 무언가를 쓰면서 미안하지만, "나는 또한 생각하고 있었지만 어쩌면 뭔가하는 것"은 나에게 의미를 부여합니다. –

+0

예, '게시물'을 클릭하기 전에 작성한 내용을 읽어야합니다. –

+1

HTML5로 이동할 수 있다면 data- 속성을 사용하십시오. http://ejohn.org/blog/html-5-data-attributes/ –

답변

6

CSS 재미! Syntax and Basic Data Types (CSS2의) 권고의 섹션 4.1.3에서는

식별자 이스케이프 문자와 숫자 코드와 같은 ISO 10646 문자 (다음 항목 참조)이 포함될 수 있습니다 ... 말한다. 예를 들어, 식별자 "B & W?" "B \ & W \?"로 쓰여질 수 있습니다. 또는 "B \ 26 W \ 3F".

<style type="text/css"> 
    .\@user { /* valid! */ 
     color:red; 
    } 
</style> 

는 또한, class 속성 is a cdata-list은 기본적으로 " any text except new lines and multiple spaces"의미

그래서 당신은 당신의 CSS에 특수 문자를 포함 할 수 있습니다.

그래서 당신은 당신의 마크 업이 같은 것을 포함 할 수 있습니다.

<div class="@user"> 
    This is an @user 
</div> 

귀하의 문제는 너무 많은 @ 또는 : 문자,하지만 당신은에 던져 한   (이후에 그 공간 아니다 속성 공백은 특별한 의미가 있습니다. "Multiple class names must be separated by white space characters.")

+0

흥미 롭습니다. 공백은 의도적으로 존재하며 공백으로 구분 된 여러 개의 클래스를 가질 수 있습니다. –

+0

... 내 지식에 따르면, 대부분의 브라우저에서 구현됩니다. –

+0

+1 나는 ** 백 슬래시가 IE 해킹이 아닌 CSS에서 실제로 사용되는 것을 알고있었습니다. – BoltClock

2

간단한 해결책은 CSS 클래스 이름에 유효한 모두 대시 - 또는 밑줄 _, 그것을 분할하는 것입니다.

<input id='txtPrimary' type='text' class='compare id-txtSecondary'/> 
<input id='txtSecondary' type='text' /> 

<input id='txtPrimary' type='text' class='compare id_txtSecondary'/> 
<input id='txtSecondary' type='text' /> 
관련 문제