CSS 의사 클래스 함수에서 복합 선택기를 효과적으로 사용하는 방법 알아보기: 호스트 컨텍스트(<selector>)

Question

MDN 문서에서 :host-context()는 다음과 같이 정의됩니다.

:host-context() CSS 의사 클래스 함수는 CSS의 Shadow DOM을 포함하는 섀도우 호스트를 선택합니다(그래서 Shadow DOM에서 사용자 정의 요소를 선택할 수 있습니다). 그러나 선택기가 함수로 제공되는 경우에만 해당됩니다. 인수 DOM 계층 구조에서 섀도우 호스트의 조상 위치와 일치하는 경우에만 유효합니다. 즉, 이를 통해 사용자 정의 요소나 Shadow DOM의 모든 항목에 외부 DOM에서의 위치나 상위 요소에 적용된 클래스/속성을 기반으로 다양한 스타일을 적용할 수 있습니다.

문제는 제공된 라이브 예제 :host-context(article, aside) { color: gray; } 语句不起作用。同样，如果我尝试添加其他以空格分隔的复合选择器，例如 :host-context(h1 a){ background: orange}에서도 동일한 문제가 발생했다는 것입니다.

문서 페이지에 제공된 예는 다음과 같습니다.

으아악

이런 일이 발생하는 이유나 공백으로 구분된 선택기(예: 하위 선택기)가 :host-context() 의사 클래스 함수에 대한 인수에서 작동하도록 만드는 방법을 아는 사람이 있습니까?

저는 :host-context() 伪类函数能够使用类似于 h1 a 의사 클래스 함수가 ​​h1 a와 유사한 공백으로 구분된 복합 선택자를 인수로 사용할 수 있을 것으로 예상했습니다. 문서 페이지에 그렇게 설명되어 있기 때문입니다.

감사합니다.

Answer 1

MDN 예제의 잘못된 코드입니다. <compound-selector>或<simple-selector>만 허용되는 유형입니다.

변경을 했고 이 풀 요청이 승인되었습니다.

---

설명

문서에서 잘못된 예를 제거했습니다.

문서의 구문

으아악

잘못된 예시

으아악

:host-context()伪类函数的参数不是<compound-selector>에 제공되었으므로 유효하지 않습니다. 대신 이는 유효하지 않으며 실제 예에서는 작동하지 않는 "선택기 목록"입니다.

으아악

:host-context()伪类函数的参数不是<compound-selector>。相反，它是一个<complex-selector>에 제공되었으므로 유효하지 않습니다. 대신 <complex-selector>이며 이는 유효하지 않으며 실제 예에서는 작동하지 않습니다.

이 내용은 선택기 구조 - CSS 선택기 - MDN 문서 페이지 에 설명되어 있습니다.

동기부여

잘못된 CSS는 실제 사례를 볼 때 혼란을 야기할 수 있습니다.