css 스타일 연결 정의

1919 단어 css
직렬 연결 스타일 을 정의 할 때 각 층 사이 에 빈 칸 이 있 는 지 없 는 지 는 차이 가 있 습 니 다. 아래 코드 를 먼저 보 세 요.
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css      </title>

<style type="text/css">

.layer1_1 .layer1_2 .layer1_3 {
	color: red;
}

.layer2_1 .layer2_1.layer2_2 {
	color: blue;
}

</style>

</head>
<body>

<div class="layer1_1">
	<div class="layer1_2">
		<div class="layer1_3">  1</div>
	</div>
</div>

<div class="layer2_1">
	<div>
		<div class="layer2_1 layer2_2">  2</div>
	</div>
</div>
</body>
</html>


 
실행 결 과 는 빨간색 과 파란색 을 정상적으로 나타 내 며 결과 분석 을 통 해 알 수 있다.
빈 칸 이 있 을 때 는 서로 다른 층 (예 를 들 어 스타일. layer 1 1. layer 1 2. layer 1 3) 을 나타 내 고 빈 칸 이 없 을 때 는 같은 층 (예 를 들 어 스타일. layer 2 1. layer 2 1. layer 2 2) 을 가리킨다.
 
정 의 했 습 니 다. layer 11 .layer1_2 .layer1_3. html 에 3 층 스타일 클 라 스 가 있어 야 해석 할 수 있 습 니 다.
 
정 의 했 습 니 다. layer 21 .layer2_1.layer2_2, html 에는 2 층 스타일 class 가 있어 야 하 며, 2 층 은 "layer 2 1 layer 2 2" 또는 "layer 2 2 layer 2 1" 과 같이 써 야 해석 할 수 있 습 니 다.
 
달리
 
.layer2_1 .layer2_1.layer2_2 { color: blue;}
쓰다
 
.layer2_1 .layer2_2 { color: blue;}
< div class = "layer 2 1" > < div > < div class = "layer 2 1 layer 2 2" > 테스트 2 < / div > < / div > < / div > < / div > >
정확하게 해석 하 겠 습 니 다.

좋은 웹페이지 즐겨찾기