CSS 이후의 하위 선택자와 다중 클래스 선택자

<신규가입 환영합니다#- ->

1. 하위 선택자

CSS 하위 선택기에 대해 이야기합니다. 파생된 선택자 중 하나이며, 둘 사이의 관계는 다음과 같습니다.

-->파생 선택기

----CSS 하위 선택기

----CSS 하위 요소 선택기

----CSS 인접 형제 선택자

그렇다면 질문은 언제 자손 선택자를 사용해야 하느냐는 것입니다. p 요소의 범위 요소(.A 클래스)에 대해 특별한 스타일을 설정해야 한다고 가정해 보겠습니다. 하위 항목 선택기를 사용하여 요소를 선택할 수 있습니다.

<span style="color: #800000;">/*方式1*/<br>p span</span>{<span style="color: #ff0000;">...</span>}<br>/*方式2*/<br>p .A{...}

위 코드의 두 선택자는 공백으로 구분되어 있습니다. 게다가 자손 선택자는 매우 자유롭게 사용할 수 있습니다. 이렇게 표현하자면, 위의 예에서 p 요소는 할아버지와 같이 스팬의 직계 선배인 한 반드시 스팬의 아버지일 필요는 없습니다. 즉, p 요소에 범위 요소가 포함된 경우 하위 선택자가 작동할 수 있습니다.

2. 다중 카테고리 선택기

다음으로 다중 유형 선택자에 대해 이야기하겠습니다. 예:

<span style="color: #800000;">.funny</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.handsome</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.funny.handsome</span>{<span style="color: #ff0000;">...</span>}

위 코드에서는 두 선택자를 구분하는 공백이 없습니다. 좋아요, 이제 .funny와 .handsome이라는 두 가지 카테고리가 있습니다. 분명히 "나는 재미있고 잘생긴 소년입니다. 둘 다 나는 아닙니다"는 진정한 명제이므로 ".funny.handsome"이라는 다중 카테고리 선택만 있습니다. " 그래야만 나를 선택할 수 있습니다. 하지만 ".funny"만으로는 나를 선택할 수 없습니다. 그 이유는 위에서 언급한 실제 제안에서 볼 수 있듯이 ".handsome" 선택자도 마찬가지입니다.

<span style="color: #800000;">button.selected</span>{<span style="color: #ff0000;">...</span>}