더 많은 실제 사용 : has ()

CSS의

의사 클래스는 의심 할 여지없이 CSS의 가장 좋아하는 새로운 기능 중 하나이며 CSS 상태 설문 조사에 참여한 많은 참가자가 이에 동의한다고 생각합니다. 선택기를 "반전"하는이 기능은 예기치 않게 강력한 기능을 제공합니다.

"더 강력한"이라고 불리는 이유는 많은 스마트 개발자들이 다음과 같은 많은 놀라운 영리한 아이디어를 출판했기 때문입니다. :has() Jen Simmons ' "사용 : CSS 부모 선택기 및 더 많은" CSS를 사용하여 동일한 클래스를 사용하여 "Element Islands"에 대한 여러 쿼리 구현 : hade () Bramus의 "어린이 수를 기준으로 부모 요소 스타일 설정" Manuel Matuzović의 "콤비네이터 사용 : has ()" Austin Gil의 "HTML을 탁월하게 만드는 4 가지 방법" Zoran Jambor의 "비디오 : : () 실용적인 경우" Jhey Tompkins 's ": has () : 가족 선택기"

이 기사는

에 대한 권위있는 안내서가 아니며 기존 컨텐츠의 복제도 아닙니다. 나는 매일 작업에서

를 사용할 가능성이 가장 높은 몇 가지 방법을 공유하고 싶습니다. 물론, 전제는 브라우저 지원이 충분하다는 것입니다. (Firefox는 인내하는 마지막 브라우저이지만 곧 지원 될 것입니다.) 브라우저 지원이 완벽 해지면 모든 곳에서

를 사용할 것입니다. 내가 최근에 만든 실제 사례는 다음과 같습니다.“이것은
• 가 완전히 지원 되는가?”라고 생각했습니다 JavaScript 구성 요소 외부에서 작동하지 않도록하십시오 다른 곳에서 페이지 스타일에 영향을 미치는 대화식 구성 요소를 구축 한 적이 있습니까? 다음 예에서 는 메가 메뉴로 위의 내용의 색상이 변경됩니다.
나는 항상 이런 종류의 일을해야한다고 생각합니다.
• 이 구체적인 예는 웹 사이트를 위해 만든 반응 구성 요소입니다. "터치"페이지의 반응 섹션 외부에서 를 사용하고 ,
또는 기타 구성 요소에 클래스를 전환해야했습니다. 이것은 세상의 끝이 아니지만 조금 어색한 느낌입니다. 완전한 React 웹 사이트 (예 : Next.js 웹 사이트)에서도 더 높은 구성 요소 트리에서 를 사용하면 문제가 해결됩니다
• 내 JavaScript 구성 요소는 더 이상 DOM의 다른 부분을 처리 할 필요가 없습니다!
더 나은 테이블 줄무늬 사용자 경험 테이블에 "줄무늬"가 번갈아 가면 사용자 경험이 향상 될 수 있습니다. 그들은 당신의 눈이 테이블을 스캔 할 때 현재있는 행을 추적하도록 도와줍니다.
• 그러나 내 경험에 따르면, 이것은 단지 2 개의 행만있는 테이블에서 잘 작동하지 않습니다. 예를 들어, 테이블에 에 3 개의 행이 있고 "각"Stripe "over"over "행이 있으면 하나의 스트라이프만으로 끝날 수 있습니다. 이것은이 패턴에 합당하지 않으며 사용자가 그 강조 표시된 라인의 특별한 점을 궁금해 할 수 있습니다. 아동 요소의 수를 기반으로 스타일을 적용하는 기술을 사용하는 Bramus 사용 3 행 이상이 있으면 테이블 줄무늬를 적용 할 수 있습니다. 더 고급 기능을 원하십니까? 테이블에 적어도 특정 수의 열이있는 경우에만이 작업을 수행하기로 결정할 수도 있습니다.

  템플릿에서 조건부 클래스 로직을 제거하십시오 페이지에있는 내용에 따라 페이지 레이아웃을 변경해야합니다. 다음 그리드 레이아웃을 예로 들어, 기본 내용물의 위치는 사이드 바가 존재하는지 여부에 따라 그리드 영역을 변경합니다. <tbody> <on> 이것은 형제 페이지가 CMS에 설정되어 있는지 여부에 따라 다를 수 있습니다. 나는 보통 템플릿 로직을 사용하여 두 레이아웃에 맞게 BEM 수정 자 클래스를 레이아웃 래퍼에 추가합니다. CSS는이 것처럼 보일 수 있습니다 (반응 형 규칙 및 기타 콘텐츠는 간결하게 생략 됨) : <code>:has() 물론 CSS 관점에서 이것은 절대적으로 괜찮습니다. 그러나 이것은 템플릿 코드를 약간 지저분하게 만듭니다. 템플릿 언어에 따라, 특히 많은 어린이 요소와 똑같이 해야하는 경우 조건부로 수업을 추가하면 매우 추악해질 수 있습니다. 이것을

  : 에 기반한 메소드와 비교하십시오

  솔직히 CSS의 관점에서 볼 때 이것은 훨씬 나아지지 않습니다. 그러나 제 생각에는 HTML 템플릿에서 조건부 수정 자 클래스를 제거하는 것이 좋습니다.

  header:has(.megamenu--open) {
    /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
  }

  예를 들어 이미지가 카드에 포함될 때 의 마이크로 디자인 결정을 쉽게 생각하기 쉽지만 이러한 매크로 레이아웃 변경에도 매우 유용하다고 생각합니다.

  더 나은 구체적인 관리

  이전 기사를 읽으면 내가 특이성이 지속적이라는 것을 알게 될 것입니다. 당신이 나와 같고 전체 스타일에 및

  를 추가 할 때 특정 점수가 급증하는 것을 원하지 않는다면

  를 사용해야합니다.

  이것은

  의 특이성이 매개 변수 목록에서

  table:has(:is(td, th):nth-child(3)) {
    /* 只有在有三列或更多列时才执行操作 */
  }

  의 가장 구체적인 요소를 기반으로하기 때문입니다. 따라서 ID와 같은 것을 포함 시키면 (이유는 모르겠습니다!) 선택기는 캐스케이드에서 덮어 쓰기가 어렵습니다.

  반면에 의 특이성은 항상 0이며 특이성 점수를 절대 증가시키지 않습니다.

  :has() 밝은 미래 이들은 제작 환경에서 사용하기를 기다릴 수없는 기능 중 일부일뿐입니다. CSS- 트릭 Almanac도 몇 가지 예를 제공합니다.

  를 사용하기를 기대하는 것은 무엇입니까? 완벽한 솔루션이 될 실제 사례는 무엇입니까?

  /* m = 主要内容 */
  /* s = 侧边栏 */
  .standard-page--with-sidebar {
    grid-template-areas: 's s s m m m m m m m m m';
  }
  .standard-page--without-sidebar {
    grid-template-areas: '. m m m m m m m m m . .';
  }

위 내용은 더 많은 실제 사용 : has ()의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!