CSS 그룹화 및 중첩 선택기
선택자 그룹화
h2 요소와 단락을 모두 회색으로 만들고 싶다고 가정해 보겠습니다. 이를 달성하기 위해 가장 쉬운 방법은 다음 선언을 사용하는 것입니다.
h2, p {color:gray;}
h2 및 p 선택기 규칙 왼쪽에 배치하고 쉼표로 구분하여 규칙을 정의합니다. 오른쪽 스타일(색상:회색;)은 이 두 선택기가 참조하는 요소에 적용됩니다. 쉼표는 규칙에 두 개의 서로 다른 선택기가 포함되어 있음을 브라우저에 알려줍니다. 이 쉼표가 없으면 규칙의 의미가 완전히 달라집니다. 자손 선택기를 참조하세요.
제한 없이 원하는 만큼의 선택자를 그룹화할 수 있습니다.
예를 들어 많은 요소를 회색으로 만들고 싶다면 다음과 같은 규칙을 사용할 수 있습니다:
body, h2, p, table, th, td, pre, Strong , em {color:gray;}
팁: 작성자는 그룹화를 통해 특정 유형의 스타일을 함께 "압축"하여 보다 간결한 스타일 시트를 만들 수 있습니다.
다음 두 가지 규칙 집합은 동일한 결과를 얻지만 어느 것이 더 쓰기 쉬운지는 분명합니다.
/* 그룹화 없음 */
h1 {color :blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;}
/* 그룹화 */
h1, h2, h3, h4, h5, h6 {color:blue;}
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
h1, h2, h3, h4, h5, p{
color:purple;
font-size:15px;
}
h2.special, .special, #one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>集体声明h1</h1>
<h2 class="special">集体声明h2</h2>
<h3>集体声明h3</h3>
<h4>集体声明h4</h4>
<h5>集体声明h5</h5>
<p>集体声明p1</p>
<p class="special">集体声明p2</p>
<p id="one">集体声明p3</p>
</body>
</html> 중첩 선택기
사용 규칙 요약:
1. ID 중첩 클래스 #myid.myclass: <p id="sp" class="myclass"></p>.
2. 하나의 요소 태그는 여러 클래스를 사용합니다. .important.warning <p class="important warning">공백을 포함하지 않도록 주의하세요. 각각 두 클래스에 적용 가능함을 나타내는 공백이 있습니다.
3. id 태그 내의 클래스 요소. #myid .myclass <div id="myid"><p class="myclass"></p></div>
4. 요소 태그 아래의 클래스입니다. p .myclass <p><span class="myclass"></span></p>
4. 요소 태그 아래의 ID입니다. p #myid<p><span id="myid"></span></p>
5. 클래스 아래의 요소 태그. .myclass span <p class="myclass"><span>dd</span></p>
6. id 태그 #myid #myid2 <div id="myid 내의 id 태그 " ><div id="myid2"></div></div>. id의 사용법은 요소 태그의 사용법과 유사합니다.
7. .myclass1 .myclass2는 두 클래스가 중첩되지 않고 동일한 스타일을 사용함을 의미합니다. 클래스는 클래스 내에 중첩될 수도 있습니다. 그러나 두 .myclasses 사이에 공백이 없으면 두 클래스가 모두 있다는 의미입니다
8. 요소 태그 중첩 요소 태그 pspan <p><span></span></p>
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
</body>
</html>
