CSS 선택기(요소에 특정 상위 요소가 없는 경우)

Question

특정 상위 요소가 없는 경우 원래 값으로 덮어쓰지 않고 요소의 스타일을 변경하고 싶습니다.

https://jsfiddle.net/xqb2z8tc/를 참조하세요. 위 코드의 문제점은 믹스인의 과도한 사용으로 인해 CSS가 많이 생성되므로 다시 작성하고 싶다는 것입니다. ':has()' 선택기(브라우저 지원은 우리에게 좋습니다)를 사용하려고 생각했지만 어떻게 해야 할지 모르겠습니다.

아래 코드와 유사하지만 모든 경우에 작동해야 합니다. 위의 jsfiddle을 참조하세요.

.dark-view:not(:has(.obox)) p {
  color: white;
}

Answer 1

질문에 대한 내 해석에 따르면 .dark-view의 모든 color: #fff 应用于 .dark- 中的所有

元素view 不是 .obox 元素的后代。如果是这种情况，请考虑使用选择器 .dark-view p:not(.obox *) 요소에 color: #fff를 적용하려는 것 같습니다. .obox 요소의 자손이 아닙니다. 이 경우 .dark-view p:not(.obox *):

선택기를 사용하는 것이 좋습니다.

으아악 으아악