CSS의 고급 선택자는 무엇입니까?

css 고급 선택기에는 "범용 형제 선택기~", "속성 선택기 []", "의사 클래스 선택기: not()", "의사 클래스 선택기: nth-child()", "의사 클래스" 선택기가 포함됩니다. : nth-of-type()", "Pseudo-class 선택자: first-child 및: last-child": 1. 범용 형제 선택자는 지정된 요소와 동일한 상위 요소를 갖는 모든 요소를 ​​선택하고, 2. 속성 선택기, 속성 값 등을 기준으로 요소를 선택할 수 있습니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, Dell G3 컴퓨터.

CSS 고급 선택기는 요소를 선택하는 보다 세련되고 유연한 방법을 제공합니다. 다음은 몇 가지 일반적인 CSS 고급 선택기입니다.

1. 일반 형제 선택기: 동일한 상위 요소가 있는 모든 형제 요소를 표시하려면 물결표(~)를 사용하세요. 지정된 요소로 바로 뒤에 있습니다.

h2 ~ p {       
        color: red;
       }

2. 속성 선택기: 속성 값을 기준으로 요소를 선택할 수 있습니다.

   • 속성이 존재하는 선택기: [attr]
   • 동등 선택기: [attr=value]
   • 포함 선택기: [attr~=value]
   • 시작 일치 선택기: [attr^=value]
   • 끝 일치 선택기: [ attr$=value]
   • 포함 선택자: [attr*=value]

3. :not() 의사 클래스 선택자: 지정된 요소를 제외한 모든 요소를 ​​선택합니다.

p:not(.intro) {       
                color: red;
              }

4. :nth-child() 의사 클래스 선택기: 상위 요소에서의 위치에 따라 요소를 선택합니다.

p:nth-child(odd) {       
                   background-color: lightgray;
                 }

5. :nth-of-type() 의사 클래스 선택기: :nth-child()와 유사하지만 특정 유형의 요소만 일치합니다.

p:nth-of-type(2n+1) {       
                    font-weight: bold;
                   }

6. :first-child 및 :last-child 의사 클래스 선택기: 각각 첫 번째 및 마지막 하위 요소를 선택합니다.

div p:first-child {       
                    font-weight: bold;
                  }

이러한 고급 선택기는 개발자가 보다 정확하게 스타일을 지정해야 하는 요소를 선택하는 데 도움이 되므로 보다 유연하고 세밀한 스타일 제어가 가능합니다.

위 내용은 CSS의 고급 선택자는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!