CSS 조합 선택기

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>

프로그램을 실행하고 관찰합니다

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전