CSS에서 요소 가시성을 감지할 수 있습니까?

Question

API를 살펴보며 :visible 또는 :hidden와 같은 의사 선택기를 찾았지만 그러한 선택기가 없다는 사실에 실망했습니다. . jQuery는 한동안 이러한 선택기를 지원했기 때문에 구현되기를 바랍니다. 내 생각은 옆에 있는 요소가 숨겨져 있을 때만 특정 요소를 표시하고 싶지만 JavaScript를 사용하여 그렇게 하고 싶지는 않다는 것입니다. 옵션이 있나요?

Answer 1

"옆에"라는 말의 의미에 따라 다릅니다. 속성 선택기를 사용하여 가시성에 따라 요소를 선택할 수 있습니다. 또는 여기에서 선택하세요.

가시성을 기준으로 요소에 액세스하려면 예를 들어 하위 문자열 일치 속성 선택기 별표를 사용할 수 있습니다. [att*=val]。假设div的样式是使用visibility: hidden;Hidden:

으아악

---

이제 문제는 "다음에 있는" 요소에 액세스하는 방법입니다. 대상으로 삼으려는 요소가 숨겨진 요소(동일한 상위 요소 내) 바로 뒤에 있는 경우 + 선택기를 사용하세요.

으아악

이전이라면 할 수 있는 일이 없지만 다음 질문에 대한 답변에서 몇 가지 해결 방법을 찾을 수 있습니다. "이전 형제" CSS 선택기가 있습니까?

Answer 2

아니요, 적어도 스타일시트에서는 또는 불가능합니다.

그렇지 않으면 무한 루프가 생성됩니다.

으아아아

요소가 처음에 표시되었다가 선택기가 이를 선택하고 숨긴 다음 선택기가 적용되지 않고 다시 표시되는 식입니다.

JS API에서는 querySelector와 같은 의사 클래스 선택자가 허용됩니다. 하지만 제가 아는 한 아직 그런 것은 없고, CSS만으로는 구현이 불가능합니다.