div+css 웹페이지 레이아웃 디자인의 새로운 시작 (2)-CSS 튜토리얼-php.cn

div+css 웹페이지 레이아웃 디자인의 새로운 시작 (2)

黄舟

풀어 주다： 2016-12-29 14:13:23

원래의

1278명이 탐색했습니다.

다음은 CSS의 선택자를 소개합니다
선택자란? 아래에서

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
</body>
</html>

로그인 후 복사

중괄호 앞의 div가 html 태그 선택기임을 확인할 수 있습니다. 이는 html의 모든 div 태그가 이 스타일을 채택한다는 의미입니다.

<html>
<head>
<style type="text/css">
div{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div>这是一个div</div>
<div></div>
<div></div>
<div></div>
</body>
</html>

로그인 후 복사

여기에 div를 몇 개 더 추가하면 모두 동일한 스타일이라는 것을 알 수 있습니다.
이 유형의 태그 선택기는 HTML 태그인 경우에만 효과적입니다

아래에 ID 선택자를 소개합니다

<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> </head>
<body>
<div id="a">这是一个div</div>
</body>
</html>

로그인 후 복사

이건 한눈에 이해하기 쉽습니다. ID 선택자 앞에 #

만 추가하고 클래스를 추가하면 됩니다. 선택자

<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
</body>
</html>

로그인 후 복사

앞에 클래스 선택자가 추가된 것을 한눈에 알 수 있습니다.

차이점에 대해 이야기해보자
ID, 이름에서 알 수 있듯이 레이블은 한 번만 사용할 수 있으며 클래스 선택기보다 우선순위가 높으며 클래스 선택기는 여러

을 사용할 수 있습니다.

<html>
<head>
<style type="text/css">
#a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div id="a">这是一个div</div>
<div id="a">这是一个div</div>
</body>
</html>

로그인 후 복사

과

<html>
<head>
<style type="text/css">
.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}
</style> <head>
<body>
<div class="a">这是一个div</div>
<div class="a">这是一个div</div>
</body>
</html>

로그인 후 복사

은 같습니다

그리고 CSS 스타일 블록은 이

.a{
border:solid 1px;
width:100px;
height:100px;
background:red
}

로그인 후 복사

마지막은 세미콜론을 생략해도 되지만 추가하는 것이 좋다

<html>
<head>
<style type="text/css">
#a{
background:red
}
.b{
border:solid 1px;
width:100px;
height:100px;
background:green;
}
</style> <head>
<body>
<div id="a" class="b">这是一个div</div>
</body>
</html>

로그인 후 복사

id 선택자의 우선순위가 높기 때문에 id 선택자의 배경색을 사용하게 된다

우선순위 비교
ID 선택자 》 클래스 선택자 》 라벨 선택자

그런데 클래스 선택자는 하나의 태그에 여러 개의 태그를 사용할 수 있는데, 이는 id 선택자에서는 할 수 없는 일입니다

<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
}
.b{
border:solid 1px;
background:red;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>

로그인 후 복사

class="a b" 공백에 주의하세요

이것은 div입니다

이것은 유효하지 않습니다

두 클래스 선택기의 내용이 충돌합니까?

<html>
<head>
<style type="text/css">
.a{
width:100px;
height:100px;
border:solid 1px;
background:red;
}
.b{
width:100px;
height:100px;
border:solid 1px;
background:green;
}
</style> <head>
<body>
<div class="a b" >这是一个div</div>
</body>
</html>

로그인 후 복사

배경색이 다르다는 점에 유의하세요

스타일 시트의 마지막 색상을 사용합니다. 즉, 뒤에 있는 사람이 이를 사용하게 됩니다. is green
이 class="a b"의 맥락과 관련이 없습니다

위 내용은 div+css 웹 레이아웃 디자인의 새로운 시작(2)에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!