CSS 그룹화 및 중첩

CSS 그룹화 및 중첩 선택기

그룹 선택기

스타일시트에는 동일한 스타일을 가진 요소가 많이 있습니다.

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

코드를 최소화하려면 그룹화된 선택기를 사용할 수 있습니다.

각 선택기는 쉼표로 구분됩니다.

다음 예에서는 위 코드에 대해 그룹화된 선택기를 사용합니다.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

중첩 선택기

선택기 내부의 선택기 스타일에 적용될 수 있습니다.

다음 예에서는 세 가지 스타일이 설정되었습니다.

p{ }: 모든 p 요소에 대한 스타일을 지정합니다.
.marked{ }: class="marked"로 모든 요소에 스타일 지정
.marked p{ }: 모든 class="marked" 요소 스타일 내에서 p 요소에 스타일 지정 .
p.marked{ }: class="marked"로 모든 p 요소에 대한 스타일을 지정합니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
</style>
</head>

<body>
<p>This paragraph has blue text, and is center aligned.</p>
<div class="marked">
<p>This paragraph has not blue text.</p>
</div>
<p>p elements inside a "marked" classed element keeps the alignment style, but has a different text color.</p>
</body>
</html>