English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
두 요소를 > 선택자로 분리할 때, 그것은 첫 번째 요소의 직접 자식 요소로만 일치합니다. 이와 대조적으로, 두 요소가 자식 선택자로 연결되면, 첫 번째 요소가 조상 요소로 있는 모든 요소(부모 요소가 아니어도 됩니다)를 일치시키며, DOM에서 "점프"하는 횟수에 관계없이 일치합니다.
모든 부모 요소가 <div> 요소인 <p> 요소를 선택합니다:
<!DOCTYPE html> <html> <title>기본 튜토리얼 웹사이트(oldtoolbag.com)</title> <head> <style> div>p { background-color:red; color:white; } div > span {background-color: DodgerBlue;} </style> </head> <body> <h1>기본 튜토리얼 웹사이트(ko.oldtoolbag.com)</h1> <div> <p>저희 웹사이트 주소는: ko.oldtoolbag.com.</p> <p>저희 웹사이트 이름은: 기본 튜토리얼 웹사이트.</p> <span>자식 선택자를 시연합니다</span> </div> <p>저희가 여러 가지 기본 튜토리얼을 제공합니다. 기본을 잘 배우면 더 멀리 가실 수 있습니다! </p> </body> </html>테스트해 보세요 ‹/›
요소1 > 요소2 {스타일 선언 }
element>element 자식 선택자는 특정 부모 요소를 선택하는 데 사용됩니다.
주의: 요소가 선택되지 않았다면, 직접 부모 요소의 자식 요소를 지정할 수 없습니다.
IEFirefoxOperaChromeSafari
모든 주요 브라우저가 지원합니다 element>element 자식 선택자.
주의:element>elementIE에서8중에서 실행되는 경우, 선언해야 합니다 <!DOCTYPE>
완전한 CSS 선택자 참조 매뉴얼