CSS3 계층적 선택기란 무엇입니까?

CSS3 계층적 선택기에는 다음이 포함됩니다. 1. E 요소의 모든 하위 F 요소를 선택하는 하위 선택기 "E F" 2. E 요소 아래의 모든 하위 요소 F를 선택하는 하위 요소 선택기 3 . 인접한 형제 요소 선택기 "E+F"는 E 요소 바로 다음에 있는 요소 F를 선택합니다. 4. 형제 선택기 "E~F".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

하위 선택자(E F)

하위 선택자는 포함 선택자라고도 합니다. 해당 기능은 다음과 같이 특정 요소의 하위 요소를 선택하는 것입니다. E F, 앞의 E는 조상 요소입니다. 하위 요소의 경우 E 요소의 모든 하위 F 요소가 선택된다는 의미입니다. 두 요소 사이에는 공백이 필요합니다. 여기서 F가 E 요소의 하위 요소인지 손자 요소인지 또는 더 깊은 관계인지에 관계없이 선택됩니다. 즉, E에서 F의 관계 수준이 아무리 많아도 선택됩니다. Browser

.demo li {color: blue;}

위는 div.demo의 모든 li 요소가 선택되었음을 나타냅니다. spa

모든 브라우저에서 지원되는 하위 항목 선택기입니다. 3d

하위 요소 선택기(E>F)

하위 요소 선택기는 특정 요소의 하위 요소만 선택할 수 있습니다. 여기서 E는 상위 요소이고 F는 하위입니다. 그 중 E>F는 E 요소 아래의 모든 하위 요소 F가 선택된다는 의미이다. 이는 F가 E의 하위 요소인 EF(후손 선택기)와 F가 E의 하위 요소일 뿐인 하위 요소 선택기 E > F와는 다릅니다. blog

ul > li {
background: green;
color: yellow;
}

의 코드는 ul 아래의 모든 하위 요소 li가 선택되었음을 나타냅니다. 예: bfc

IE6은 하위 요소 선택기를 지원하지 않습니다. im

Adjacent Sibling Selector(E + F)

Adjacent Sibling Selector는 다른 요소 바로 뒤에 있는 요소를 선택할 수 있으며, 두 요소는 동일한 Parent 요소, 즉 두 개의 EF를 갖습니다. 요소에는 동일한 상위 요소가 있고 F 요소는 E 요소 뒤에 있고 인접해 있으므로 인접한 형제 요소 선택기를 사용하여 F 요소를 선택할 수 있습니다. demo

li + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

위 코드는 li의 인접 요소 li가 선택되었음을 나타냅니다. 여기에는 10개의 li가 있으므로 위 코드는 2번째 li부터 10번째 li까지 총 9개를 선택합니다. 효과를 확인하세요. db

위의 li+li이므로 두 번째 li는 첫 번째 li의 인접 요소이고, 세 번째도 두 번째 인접 요소이므로 세 번째도 선택되는 식이므로, 따라서 , 다음 9개의 li가 모두 선택되었습니다. 다른 방식으로 보면 더 잘 이해할 수 있습니다. img

.active + li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

위에서 언급한 지식에 따르면 이 코드는 분명히 active에 인접한 li 요소에 대해 li을 선택합니다. , li.active 옆에 요소가 하나만 있다는 점에 유의하세요. 그림에 표시된 대로: di

IE6은 이 선택자를 지원하지 않습니다

범용 형제 선택자(E~F)

범용 형제 요소 선택자는 새로운 CSS3 요소 뒤에 있는 모든 형제 요소를 선택하는 선택자입니다. 또한 인접한 형제 요소와 유사하며 동일한 상위 요소에 있어야 합니다. 즉, E 및 F 요소는 동일한 상위 요소에 속합니다. F 요소가 E 요소 뒤에 있으면 E ~ F 선택기는 모든 E 요소 다음에 F 요소를 선택합니다. 예를 들어, 다음 코드는

.active ~ li {
background: green;
color: yellow; 
border: 1px solid #ccc;
}

위 코드의 의미는 그림과 같이 li.active 요소 뒤의 모든 형제 요소 li가 선택된다는 것입니다.

범용 형제 선택기 및 인접 형제 선택기 Very 유사하지만, 인접 형제 선택기는 요소에 인접한 요소만 선택하는 반면(단 하나의 요소만 선택됨) 범용 형제 선택기는 요소의 인접한 형제 요소를 선택하므로 언급하기가 혼란스러울 수 있습니다. 인접한 형제들의 렌더링을 자세히 살펴보세요.

IE6에서는 이 선택기 사용을 지원하지 않습니다.

(학습 영상 공유: css 영상 튜토리얼)

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