여러 HTML 요소가 동일한 ID를 공유하고 여전히 CSS 선택기에 응답할 수 있습니까?

CSS 선택기의 요소 ID 및 다중 응답

HTML에서 각 요소는 문서 내에서 고유한 ID 속성을 가져야 합니다. 그러나 일반적인 질문이 생깁니다. 여러 요소가 동일한 ID 값을 공유하고 단일 CSS ID 선택기에 응답할 수 있습니까?

W3C 문서

W3C 문서에 따르면, "두 개의 ID 속성은 동일한 값을 가질 수 없습니다. ID 속성을 사용하여 해당 요소를 고유하게 식별할 수 있습니다." 이는 여러 요소에 동일한 ID를 사용하는 것이 유효한 관행이 아님을 의미합니다.

브라우저 동작

W3C 권장 사항에도 불구하고 브라우저는 종종 유효하지 않은 HTML을 허용하고 이를 처리하려고 시도합니다. 그것. 예를 들어 다음 예에서는

#red {
  color: red;
}

<p>

두 단락이 동일한 ID를 공유하더라도 빨간색으로 표시됩니다. 이는 브라우저가 개발자의 의도를 추측하고 그에 따라 유효하지 않은 HTML을 해석하여 "조용히 실패"하려고 하기 때문에 발생합니다.

위험 및 제한 사항

브라우저가 페이지를 올바르게 렌더링할 수 있지만 위 시나리오에서 HTML 사양을 벗어나면 예상치 못한 부작용이 발생할 수 있습니다. 예를 들어 document.getElementById('red')를 사용하면 일치하는 첫 번째 요소만 반환됩니다. 또한 일관성을 보장하려면 다양한 브라우저에서 테스트하는 것이 중요합니다.

CSS 선택기에 동일한 ID를 사용하지 않는 것이 좋습니다

여러 요소에 동일한 ID를 사용하지 않는 것이 가장 좋습니다. 대신 비슷한 스타일을 공유하는 요소를 대상으로 하는 클래스 이름을 사용하는 것이 좋습니다. 클래스 이름은 이러한 목적을 위해 특별히 설계되었으며 각 요소가 고유한 식별자를 갖도록 보장합니다.

동일한 ID를 가진 여러 요소에 대한 대안

동일한 요소를 여러 개 선택하는 경우 ID는 반드시 필요합니다. 속성 선택기 사용을 고려하세요.

document.querySelectorAll('p[id="red"]');

그러나 이 접근 방식은 Internet Explorer 7 및 아래.

위 내용은 여러 HTML 요소가 동일한 ID를 공유하고 여전히 CSS 선택기에 응답할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!