HTML의 중복 ID가 작동하는 이유는 무엇이며 모범 사례는 무엇입니까?

<p>

<p>동일한 ID를 가진 여러 요소가 CSS 선택기에 응답

<p>단일 웹페이지 내에서 여러 요소에 동일한 ID를 할당하는 것은 일반적으로 좋지 않은 관행으로 간주됩니다. . W3C 문서에 따르면 ID 속성에는 각 요소를 고유하게 식별하기 위한 고유한 값이 있어야 합니다.

<p>그러나 jQuery 플러그인 사용과 같은 특정 상황에서는 실수로 ID가 중복될 수 있습니다. 놀랍게도 브라우저는 "조용히 실패"하여 이러한 상황을 처리하는 경향이 있습니다. 그들은 유효하지 않은 HTML 이면의 의도를 해석하고 이에 따라 동작을 조정하려고 시도합니다.

<p>예를 들어 다음 코드를 고려해보세요.

#red {
  color: red;
}

<p>

<p>중복 ID에도 불구하고 두 단락은 모두 모든 주요 브라우저에서는 빨간색으로 표시됩니다. 그러나 이 동작은 보장되지 않으며 예상치 못한 부작용이 발생할 수 있습니다.

<p>예를 들어 document.getElementById('red')를 사용하여 해당 ID로 요소에 액세스하면 첫 번째 요소만 반환됩니다. 두 요소를 모두 선택하려면 document.querySelectorAll('p[id="red"]')와 같은 속성 선택기를 사용해야 합니다. 그러나 이 접근 방식은 IE7 이하에서는 지원되지 않습니다.

<p>잠재적인 문제를 방지하려면 CSS로 여러 요소를 타겟팅할 때 ID 대신 클래스 이름을 사용하는 것이 좋습니다. 클래스 이름은 이러한 목적을 위해 명시적으로 설계되었으며 모든 브라우저에서 일관성을 보장합니다.

위 내용은 HTML의 중복 ID가 작동하는 이유는 무엇이며 모범 사례는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!