CSS의 보다 큼(>) 선택자는 무엇입니까?

CSS에서는 다른 프로그래밍 언어처럼 두 값을 비교할 때 ">" 기호를 사용하지 않습니다. 여기서는 보다 큼 기호(>)를 선택자로 사용합니다.

CSS에서 선택기는 단일 또는 여러 HTML 요소를 선택하는 데 사용됩니다. 선택기에서 보다 큼 기호를 사용할 때마다 상위 요소의 직접 하위 요소가 선택되지만 깊게 중첩된 하위 요소는 선택되지 않습니다.

문법

사용자는 다음 구문에 따라 CSS 선택기에서 보다 큼 기호를 사용할 수 있습니다.

으아아아

위 구문에서 "selector1"은 상위 요소이고 "selector2"는 직계 하위 요소입니다. 따라서 선언 블록에서 하위 요소의 스타일을 정의합니다.

예 1

아래 예에서는 HTML 요소의 정렬된 목록을 만듭니다. CSS에서는 "ol>li" 선택기를 사용합니다. 이는 "li" 요소의 직계 하위 요소인 모든 "ol" HTML 요소를 선택한다는 의미입니다.

출력에서 사용자는 모든 "li"가 "ol"의 직계 하위 항목이므로 목록의 모든 요소가 파란색으로 변하는 것을 확인할 수 있습니다.

으아아아

예 2

아래 예에는 다양한 수준의 "p" 요소를 포함하는 div 요소가 있습니다. div 요소 안에 "ht4" 요소와 "p" 요소를 추가했습니다. 따라서 두 번째 및 세 번째 깊이 수준에 "p" 요소를 추가했습니다.

CSS에서는 “div>p” CSS 선택기를 사용하여 div 요소의 모든 직접 “p” 요소를 선택합니다. 또한 div 요소 내의 모든 "p" 요소를 선택하는 "div p" CSS 선택기를 사용했습니다.

출력에서 사용자는 "color: red"가 div 요소의 유일한 직계 하위 요소인 첫 번째 "p" 요소에만 적용된다는 것을 확인할 수 있습니다. "div p" CSS 선택기가 모든 수준에서 하위 요소를 선택하면 "Background-color: aqua"가 모든 "p" 요소에 적용됩니다.

으아아아

예 3

아래 예에서는 보다 큼 기호를 사용하여 깊게 중첩된 수준에서 HTML 요소를 선택합니다. 여기서 "컨테이너" HTML 요소에는 순서가 지정되지 않은 목록이 포함되어 있으며 "컨테이너" 요소 외부에도 순서가 지정되지 않은 목록이 생성되었습니다.

CSS에서는 '.container>ul>li' CSS 선택기를 사용하여 'ul' 요소의 직계 하위 요소인 모든 'li' 요소를 선택합니다. 여기서 'ul' 요소는 'ul' 요소 요소 An의 직계 하위 요소여야 합니다. "컨테이너" 클래스 이름을 가진 요소입니다.

출력에서 모든 CSS가 중첩 목록에만 적용되는 것을 볼 수 있습니다.

으아아아

사용자는 CSS에서 보다 큼 기호(>) CSS 선택기를 사용하는 방법을 배웠습니다. 특정 요소의 직계 하위 요소를 선택하는 데 사용됩니다. 여기서는 HTML 태그, 클래스 이름, ID 등을 사용할 수 있습니다. 보다 큼 기호(>)가 있는 CSS 선택기입니다.

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