CSS 클래스 이름 / 선택기에서 사용할 수 있는 특수문자

질문 : CSS 클래스 이름 / 선택기에서 유효한 문자는 무엇입니까?

---

CSS 클래스 선택기 내에서 허용되는 문자 / 기호는 무엇입니까?
다음 문자가 유효하지 않다는 것을 알고 있지만 어떤 문자가 유효 합니까?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

답변

---

CSS 문법 에서 직접 확인할 수 있습니다.

기본적으로 ¹ , 이름은 밑줄 ( _ ), 하이픈 ( - ) 또는 문자 ( a – z )로 시작하고 그 뒤에 하이픈, 밑줄, 문자 또는 숫자가 따라 와야합니다. 캐치가있다 : 첫 번째 문자는 하이픈 인 경우, 두 번째 문자 ^2는 문자 나 밑줄이어야하며, 이름이 긴 최소 2 자 이상이어야합니다.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

간단히 말해, 이전 규칙은 W3C 사양에서 추출한 다음으로 변환됩니다. :

CSS에서 식별자 (선택기의 요소 이름, 클래스 및 ID 포함)는 문자 [a-z0-9] 및 ISO 10646 문자 U + 00A0 이상과 하이픈 (-) 및 밑줄 (_) 만 포함 할 수 있습니다. ; 숫자 또는 하이픈 뒤에 숫자로 시작할 수 없습니다. 식별자는 이스케이프 된 문자와 ISO 10646 문자를 숫자 코드로 포함 할 수도 있습니다 (다음 항목 참조). 예를 들어, 식별자 "B & W?" "흑백?" 또는 "B \ 26 W \ 3F".

하이픈이나 밑줄로 시작하는 식별자는 일반적으로 -moz-opacity 에서와 같이 브라우저 별 확장을 위해 예약되어 있습니다.

¹ 이스케이프 된 유니 코드 문자 (아무도 실제로 사용하지 않음)를 포함하여 모든 것이 조금 더 복잡해졌습니다.

² 내가 연결 한 문법에 따르면 두 개의 하이픈으로 시작하는 규칙 (예 : --indent1 )은 유효하지 않습니다. 그러나 나는 이것을 실제로 보았다고 확신합니다.

출처 : https://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors