CSS 조합 선택기
CSS 조합 선택기
CSS 조합 선택기를 사용하면 선택기 간의 관계를 직관적으로 이해할 수 있습니다.
 | 组合选择符说明了两个选择器直接的关系。 |
|---|
CSS 결합 선택기에는 단순 선택기의 다양한 조합이 포함됩니다.
CSS3에는 네 가지 조합 방법이 포함되어 있습니다.
하위 항목 선택자(공백으로 구분)
하위 요소 선택자(보다 큼 기호로 구분)
인접 형제 선택자(공백으로 구분) 대시로 구분)
일반 형제 선택자(대시로 구분)
하위 선택자
하위 선택자는 가치 있는 요소의 모든 하위 요소와 일치합니다.
다음 예에서는 모든 <p> 요소를 선택하여 <div> 요소에 삽입합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>Run Instance»
온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
하위 요소 선택자
하위 선택자와 비교하여 하위 선택자는 요소의 하위 요소만 선택할 수 있습니다.
다음 예제에서는 <div> 요소의 모든 직접 하위 요소<p>를 선택합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>Run Instance»
온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
인접 형제 선택기는 다른 요소 바로 다음에 요소를 선택할 수 있으며 둘 다 동일한 부모 요소를 갖습니다.
다른 요소 바로 다음에 요소를 선택해야 하고 둘 다 동일한 상위 요소가 있는 경우 인접 형제 선택기를 사용할 수 있습니다.
다음 예에서는 <div> 요소 뒤에 있는 모든 첫 번째 <p> 요소를 선택합니다.
Example<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>
예제 실행»온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
후속 형제 선택기는 지정된 요소 다음에 인접한 모든 형제 요소를 선택합니다.
다음 예에서는 모든 <div> 요소 뒤에 있는 모든 인접 형제 요소 <p>를 선택합니다.
Example<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
예제 실행 »온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
