의 힘 : CSS에 ()가 있습니다

동료 ​​개발자, CSS의 흥미로운 세계로 뛰어 들자! 상대적으로 새롭지 만 는 요소의 내부 구조를 기반으로 스타일링을 정확하게 제어 할 수있는 프론트 엔드 개발자들 사이에서 빠르게 좋아하는 것이되었습니다. 기능과 실제 응용 프로그램을 탐색합시다.

이해

:has() :has() pseudo-class는 특정 자식 요소가 포함 된 경우에만 요소를 우아하게 스타일로 사용합니다. 이 요소가 조건부 스타일로 생각하십시오. "이 요소가

that

가 포함되어 있다면, 스타일 이 요소.". " 구문 : :has()

일반적인 스타일링 챌린지 해결

이전에는 어린이의 존재에 따라 부모 요소를 스타일링하여 JavaScript가 필요했습니다. 우아하게 이것을 해결합니다. (제목) 뒤에 (자막)가 이어질 수있는 블로그 게시물 목록을 고려하십시오. AN이 바로 뒤에 존재하는 경우에만 :has()를 시각적으로 강조 할 수 있습니다. 이전에, 이것은 JavaScript를 필요로했습니다. 오래된 (javaScript) 방법 : 이 JavaScript 코드는 요소를 통해 반복하고, 다음

를 확인하고, 스타일을위한 클래스를 추가합니다. 새로운 (CSS) 방법 :

이 간결한 CSS는 및 인접한 형제 조합 (가 즉시 그것을 따르는 경우에만 파란색을 스타일로 만들어줍니다.

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

실용

예제

가 빛나는 몇 가지 시나리오를 탐색합시다 예 1 :

:has() html :

CSS : <h1></h1> <h2></h2> 첫 번째 <h1></h1>만이 파란색이 될 것입니다. <h2></h2> 예제 2 : 캡션이있는 스타일링 이미지 :has() 종종 우리는 이미지와 캡션으로 작업합니다. 는 이미지 프리젠 테이션을 향상시킬 수 있습니다

html :

CSS :

이 스타일은 const h1Elements = document.querySelectorAll('h1'); h1Elements.forEach((h1) => { const h2Sibling = h1.nextElementSibling; if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') { h1.classList.add('highlight-content'); } });. 브라우저 지원 및 커뮤니티 사용량

<h1></h1> 최신 브라우저에서 광범위한 지원을 즐깁니다 (자세한 브라우저 호환 정보는 Caniuse.com을 확인하십시오). 커뮤니티 피드백은 접근성 향상을 포함하여 창의적인 용도를 보여줍니다 중요한 고려 사항 : <h2></h2>

특이성 :
• 는 가장 구체적인 내부 선택기의 특이성을 상속합니다. 브라우저 호환성 : :has() 또는
와 같은 용서자 내에서 사용하지 않는 한 실패는 캐스케이드됩니다. 중첩 :
• 는 다른 . 안에 중첩 될 수 없습니다 pseudo elements : pseudo elements는 :has() :is() :where() 결론 :
• 는 CSS Arsenal에 강력한 추가 기능으로 이전에 JavaScript에 의존하는 우아하고 효율적인 스타일을 가능하게합니다. 기능과 한계를 이해함으로써 웹 개발 기술을 높이고보다 강력하고 유지 관리 가능한 코드를 만들 수 있습니다. :has() 추가 읽기 : :has()
ISHA DEED의 기사 : CSS- 트릭 on : hAr Chrome 블로그 게시물 : has ()
• css-tricks : has () selector :has()

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