CSS 조합 선택기
조합 선택기는 두 선택기 간의 직접적인 관계를 보여줍니다.
CSS 결합 선택기에는 단순 선택기의 다양한 조합이 포함됩니다.
CSS3에는 네 가지 조합 방법이 포함되어 있습니다.
하위 선택자(공백으로 구분)
하위 요소 선택자(보다 큼 기호로 구분)
인접 형제 선택자(공백으로 구분) 더하기 기호 구분 )
일반 형제 선택자(대시로 구분)
하위 항목 선택자
하위 항목 선택자는 가치 있는 요소의 모든 하위 요소와 일치합니다.
다음 예에서는 모든 p 요소를 선택하여 div 요소에 삽입합니다.
<!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>프로그램을 실행하여 관찰
하위 요소 선택기
하위 요소 선택기와 비교하면, 하위 요소 선택기( 선택자는 요소의 하위 요소만 선택할 수 있습니다.
다음 예에서는 <div> 요소의 모든 직계 하위 요소를 선택합니다.
<!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>프로그램을 실행하고 관찰
Adjacent Sibling Selector
Adjacent Sibling Selector 다른 요소 바로 뒤에 있는 요소를 선택할 수 있으며 둘 다 동일한 상위 요소를 갖습니다.
다른 요소 바로 다음에 요소를 선택해야 하고 둘 다 동일한 상위 요소가 있는 경우 인접 형제 선택기를 사용할 수 있습니다.
다음 예에서는 <div> 요소 뒤의 모든 첫 번째 <p> 요소를 선택합니다.
<!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>를 선택합니다.
<!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>프로그램을 실행하고 관찰합니다
