CSS 선택기를 사용하여 숫자 ID로 HTML 요소를 타겟팅할 수 있습니까?

CSS 선택기가 숫자 ID가 있는 요소를 대상으로 지정할 수 있나요?

HTML5에서는 ID에 숫자만 포함할 수 있으므로 기술적으로 유효합니다. 그러나 숫자 ID를 사용하면 CSS 선택기로 대상을 지정할 때 문제가 발생할 수 있습니다.

HTML의 유효성

숫자 ID는 HTML5 사양에 의해 제한되지 않으며 HTML5 사양에서 널리 지원됩니다. 브라우저. 그들은 ID 값이 공백이 아닌 문자로 구성되어야 한다는 규칙을 고수합니다.

CSS 선택기의 함정

숫자로 시작하는 ID는 HTML에서 유효하지만 HTML에서는 유효하지 않습니다. CSS 선택기에서 직접 활용됩니다. 이 제한을 피하려면 백슬래시()를 사용하여 초기 숫자를 이스케이프해야 합니다. 예를 들어 CSS에서 ID가 "12"인 요소를 선택하려면 #3132를 사용합니다. 여기서 31은 "1"의 16진수 코드이고 32는 "2"의 16진수 코드입니다.

해결 방법

CSS 선택기에서 숫자 ID를 사용하여 발생하는 복잡성을 피하려면 문자로 ID를 시작하는 것이 좋습니다. 또는 JavaScript를 사용하여 숫자 ID를 기반으로 요소를 조작할 수 있습니다. document.getElementById 및 document.querySelector와 같은 JavaScript 메소드는 ID 형식에 관계없이 요소를 대상으로 지정할 수 있습니다.

예

다음 코드는 다음과 같은 ID를 가진 요소로 작업하는 방법을 보여줍니다. 숫자로 시작:

<div>

숫자 ID는 HTML에서 기술적으로 허용되지만 CSS 스타일을 단순화하기 위해 일반적으로 문자로 ID를 시작하는 것이 선호됩니다.

위 내용은 CSS 선택기를 사용하여 숫자 ID로 HTML 요소를 타겟팅할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!