까다로운 CSS 선택기

14912 단어 csshtmltutorialjavascript

jQuery의 대안 nextUntil()



오늘 저는 간단해 보이는 문제에 직면했습니다.
  • 각 헤더 h2 아래의 단락에 다른 텍스트 색상이 필요함
  • sample1-1에서 sample1-3으로 -> 파란색
  • sample2-1에서 sample2-2로 -> 빨간색
  • 샘플3-1 -> 녹색

  • h2를 클릭하면 바로 다음 단락 표시를 토글해야 합니다.

    • <!DOCTYPE html>
<html lang=en>
  <meta charset=UTF-8>
  <title>Document</title>
  <h1>Sample</h1>
    <h2>sample-1</h2>
      <p>sample1-1
      <p>sample1-2
      <p>sample1-3
    <h2>sample-2</h2>
      <p>sample2-1
      <p>sample2-2
    <h2>sample-3</h2>
      <p>sample3-1
  <h3>Note</h3>
  <p>the paragraphs under each header2
  <p>need a different text color 
  <p>test1-1 to test1-3 -> blue
  <p>test2-1 to test2-2 -> red
  <p>test3-1 -> green
  <p>a click on h2 must toggle display the direct
  <p>following paragraphs


    자, 색상부터 시작하겠습니다.
    몇 가지 간단한 CSS 규칙을 작성하고
    일반 형제 선택기(~)
    내 친구입니다 :-):

    h2:first-of-type~p {color:blue}
h2:nth-of-type(2)~p {color:red}
h2:nth-of-type(3)~p {color:green}


    완료, 각 h2 아래의 색상이 정확합니다. 안타깝게도 다음 h3 아래의 단락도 녹색으로 바뀝니다.
    General Sibling Selector(~)가 다음 단락을 모두 선택한다고 생각하지 않았습니다.

    어떻게 해야 하나요?
  • 첫 번째 h2 요소가 필요합니다h2:nth-of-type(1).
  • 다음의 모든 단락~p
  • 그러나 두 번째h2 뒤의 다음 단락은 제외

    • 알겠습니다. 처음에는 두 번째 이후의 모든 단락을 선택하려고 합니다h2.
  • 첫 번째 h2 뒤에 있는 모든 항목 선택h2:nth-of-type(1)~*
  • , p는 제외(헤더 h2,h2,h3만 선택)
  • 하지만 ~p와 함께 다음 단락이 필요합니다.
  • 요약 h2:nth-of-type(1)~*:not(p)~p

    • 따라서 전체 선택기는 다음과 같습니다.

    h2:nth-of-type(1)~p:not(h2:nth-of-type(1)~*:not(p)~p)


    단락을 색칠하기 위한 CSS

    h2:nth-of-type(1)~p:not(h2:nth-of-type(1)~*:not(p)~p){
  color:blue;
}
h2:nth-of-type(2)~p:not(h2:nth-of-type(2)~*:not(p)~p){
  color:red;
}
h2:nth-of-type(3)~p:not(h2:nth-of-type(3)~*:not(p)~p){
  color:green;
}


    문제 토글 디스플레이



    h2에게 포인터 커서를 제공하고 표시를 토글하는 클래스를 생성합니다.

    h2{
  cursor: pointer;
  user-select:none;
}
.no-display{
  display:none;
}


    이전 단계에서 적절한 선택자를 이미 만들었기 때문에 나머지는 더 이상 실제 문제가 아닙니다.

    "use strict";

  document.querySelectorAll('h2')
    .forEach(( node, index ) =>
      node.addEventListener ( 'click', () =>
        document.querySelectorAll(
        `h2:nth-of-type(${index+1})~p:not(h2:nth-of-type(${index+1})~*:not(p)~p)`
        )
          .forEach(node => node.classList.toggle('no-display'))
      )
  )


    전체 코드:

    <!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Document</title>
  <style>

    h2:nth-of-type(1)~p:not(h2:nth-of-type(1)~*:not(p)~p){
      color:blue;
    }
    h2:nth-of-type(2)~p:not(h2:nth-of-type(2)~*:not(p)~p){
      color:red;
    }
    h2:nth-of-type(3)~p:not(h2:nth-of-type(3)~*:not(p)~p){
      color:green;
    }

    h2{
      cursor: pointer;
      user-select:none;
    }
    .no-display{
      display:none;
    }

  </style>
  <h1>Sample</h1>
    <h2>Test-1</h2>
      <p>test1-1
      <p>test1-2
      <p>test1-3
    <h2>Test-2</h2>
      <p>test2-1
      <p>test2-2
    <h2>Test-3</h2>
      <p>test3-1
  <h3>Note</h3>
  <p>the paragraphs under each header2
  <p>need a different text color 
  <p>test1-1 to test1-3 -> blue
  <p>test2-1 to test2-2 -> red
  <p>test3-1 -> green
  <p>a click on h2 must toggle display the direct
  <p>following paragraphs

  <script>
  "use strict";

  document.querySelectorAll('h2')
    .forEach(( node, index ) =>
      node.addEventListener ( 'click', () =>
        document.querySelectorAll(
        `h2:nth-of-type(${index+1})~p:not(h2:nth-of-type(${index+1})~*:not(p)~p)`
        )
          .forEach(node => node.classList.toggle('no-display'))
      )
  )

  </script>
    PURE React Native의 Redux
    기존 Vue 프로젝트에 Bootstrap 도입

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage