다음에 대한 소개 : CSS의 선택자가 있습니다

이 기사는 컨텐츠를 기반으로 요소를 선택하는 강력한 도구 인 CSS

선택기를 탐색합니다. 상대적으로 새롭지 만, 주요 브라우저 (Safari 15.4, Chromium 105 및 Firefox의 깃발 뒤)에서 지원이 커지고 있습니다. :has()

pseudo-class 스타일 target 요소-괄호 안에있는 특정 조건이 충족되는 경우 부착 된 요소입니다. 이것은

또는 와 같은 다른 의사 클래스와 유사합니다. 그러나

와 달리 상대 선택기 목록을 수락하여 복잡한 선택 기준을 가능하게합니다. 예를 들어, :has() 스타일 직접 어린이 만 대상으로하려면 아동 조합을 사용하십시오. 의 특이성은 괄호 안에서 가장 특정 선택기에 의해 결정됩니다 (예 : 는 ID 선택기의 특이성을 상속합니다). 형제 셀렉터도 :hover와 함께 사용할 수 있습니다. 스타일은 :active 요소가 직접적으로 이어지는 경우에만 :has() 요소입니다. 일반 형제 콤비네이터 ( 스타일 a

이후 어디에서나 형제가있는 경우.

article:has(img) <article></article> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907547642572.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="An Introduction to the :has() Selector in CSS ">

To target only direct children, use the child combinator: article:has(> img) :has() 선택기는 생성 및 조건을 위해 묶을 수 있습니다. 예를 들어, :has(#id, p, .class)

스타일 an :has()는 h1:has( h2) <h1></h1>가있는 경우에만 스타일입니다. <h2></h2> ~ ul:has(~ p) <ul></ul> 이 예제를 보여주는 코데 펜 데모를 사용할 수 있습니다. 이 기사는 CSS의 전력을 발휘하는 발췌 : 반응 형 사용자 인터페이스를위한 고급 기술 <p></p>, itepoint premium에서 사용할 수 있습니다. .CSS에 대한 자주 묻는 질문 (FAQ) : 선택기

(이 섹션은 선택기에 대한 과거 및 현재 브라우저 지원을 정확하게 반영하므로 크게 변경되지 않은 상태로 남아 있습니다.) CSS 란 무엇입니까? 선택기가 있고 어떻게 작동합니까? CSS

선택기는 어린이를 기반으로 요소를 선택할 수있는 강력한 도구입니다. 그것은 관계 적 의사 클래스입니다. 즉, 선택은 요소 간의 관계에 따라 다릅니다. CSS를 사용할 수 있습니까?

에 대한 브라우저 지원은 개선되고 있지만 아직 보편적이지는 않습니다. 가장 최신 정보에 사용할 수있는 사이트를 확인하십시오.

: jQuery가있는 선택기가있는 방법은 무엇입니까? 기본 브라우저 지원이 증가하고 있지만 더 넓은 호환성을 위해 jQuery와 함께

를 사용할 수 있습니다. 구문은 CSS 버전과 매우 유사합니다 : 선택기와 다른 CSS 선택기의 차이점은 무엇입니까? :has() 는 관계 적 성격에서 독특합니다. 속성이나 위치에만 초점을 둔 선택기와 달리 자식 요소의 존재에 따라 선택합니다. : 셀렉터가있는 대안이 있습니까? 대안은 기존 CSS 선택기의 JavaScript 또는 더 복잡한 조합을 포함하지만, 종종

의 우아함과 간결함이 부족합니다. <:> 왜 :

all

브라우저에서 셀렉터가 지원되지 않습니까? 처음에는 렌더링 속도에 관한 성능 문제가 광범위한 채택을 방해했습니다. 그러나 이러한 문제가 해결됨에 따라 브라우저 지원이 개선되고 있습니다.

CSS 파일에 선택자가 있습니다. 예, 그러나 그것을 지원하는 브라우저에서만 : 선택자의 구문은 무엇입니까? 기본 구문은 :has() 를 사용할 수 있습니까 : 다른 선택기와 함께 선택기가 있습니다 예,

는 더 복잡한 선택을 위해 다른 선택기와 결합 할 수 있습니다. 의 미래는 무엇입니까? 미래는 밝게 보입니다. 브라우저 지원이 향상됨에 따라

위 내용은 다음에 대한 소개 : CSS의 선택자가 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!