English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS > 자식 선택자

두 요소를  > 선택자로 분리할 때, 그것은 첫 번째 요소의 직접 자식 요소로만 일치합니다. 이와 대조적으로, 두 요소가 자식 선택자로 연결되면, 첫 번째 요소가 조상 요소로 있는 모든 요소(부모 요소가 아니어도 됩니다)를 일치시키며, DOM에서 "점프"하는 횟수에 관계없이 일치합니다.

완전한 CSS 선택자 참조 매뉴얼

온라인 예제

모든 부모 요소가 <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 선택자 참조 매뉴얼