>웹 프론트엔드 >CSS 튜토리얼 >여러 HTML 요소가 동일한 ID를 공유할 수 있으며 그 결과는 무엇입니까?

여러 HTML 요소가 동일한 ID를 공유할 수 있으며 그 결과는 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-25 06:18:16391검색

Can Multiple HTML Elements Share the Same ID, and What Are the Consequences?

여러 요소가 동일한 ID 선택기를 공유할 수 있습니까?

ID 속성은 고유해야 한다는 W3C의 명시적인 지침에도 불구하고 브라우저에서는 종종 중복된 ID가 발견되면 서로 다른 동작을 수행합니다.

제공된 예는 이러한 불일치를 보여줍니다. 동일한 ID가 CSS 선택기에 응답합니다. 이는 주로 HTML 표준을 위반하더라도 "조용히 실패"하고 개발자의 의도를 해석하려고 시도하는 브라우저의 경향 때문입니다.

그러나 사양을 벗어나면 예상치 못한 결과가 발생할 수 있다는 점에 유의하는 것이 중요합니다. :

  • document.getElementById('red')는 해당 요소가 포함된 첫 번째 요소만 반환합니다. ID.
  • 브라우저 구현이 다양하므로 브라우저 간 호환성 문제가 발생할 수 있습니다.

권장 사항:

최적의 결과를 얻으려면 사용하지 않는 것이 좋습니다. 요소에 중복 ID를 할당합니다. 대신 클래스 이름을 활용하여 동일한 CSS 스타일을 가진 여러 요소를 타겟팅하세요. 클래스는 이 목적을 위해 명시적으로 설계되었습니다.

다중 ID 선택을 위한 대체 접근 방식:

꼭 필요한 경우 속성 선택기를 사용하여 동일한 ID를 가진 여러 요소를 선택할 수 있습니다. :

단, IE7 이하에서는 이 접근 방식을 지원하지 않습니다.

위 내용은 여러 HTML 요소가 동일한 ID를 공유할 수 있으며 그 결과는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.