>웹 프론트엔드 >CSS 튜토리얼 >CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

青灯夜游
青灯夜游원래의
2018-09-10 11:10:4910334검색

이 장에서는 CSS 선택기가 무엇인지 설명하겠습니다. CSS3의 5가지 공통 기본 선택기. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

One: css 선택기가 무엇인가요?

CSS는 html, xml 등을 화면에 렌더링하는 데 사용되는 언어입니다. CSS는 주로 해당 요소에 스타일을 적용하여 상대적으로 적용되는 요소를 렌더링하는 것이 매우 중요합니다. 해당 요소를 선택하려면 선택기라고 부르는 것이 필요합니다. CSS에서 선택자는 스타일을 지정해야 하는 요소를 선택하는 데 사용되는 패턴입니다. 선택기는 주로 html의 트리 구조에서 DOM 요소 노드를 결정하는 데 사용됩니다.

두 가지: CSS3의 5가지 일반적인 기본 선택기

Css3에는 다양한 유형의 선택기가 있습니다. 다음은 5가지 일반적인 기본 선택기입니다: 와일드카드 선택기, 클래스 선택기, 요소 선택기, ID 선택기 및 그룹 선택기.

1. 와일드카드 선택기(모든 브라우저에서 지원)
범용 선택기는 모든 요소를 ​​선택하는 데 사용됩니다.

*{marigin: 0;
   padding: 0;
   font-size: 14px;
}

위 코드는 재설정 스타일입니다. 문서에 많이 보일 것입니다. 그가 의미하는 바는 모든 요소의 여백과 패딩이 0으로 설정되고 글꼴 크기가 14px로 설정된다는 것입니다. 다른 방법은 특정 요소 아래의 모든 요소를 ​​선택하는 것입니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			.demo * {
				width: 50px;
				height: 50px;
				border:1px solid blue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div>1</div>
			<p>2</p>
			<span>3</span>
		</div>
	</body>
</html>

Rendering :

CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

데모 요소의 세 가지 하위 요소인 div, p,span에는 각각 CSS 스타일이 설정되어 있지 않지만 아래의 모든 요소에 대해 통일된 스타일을 설정하는 한, 데모 요소인 경우 데모 요소 스타일이 세 개의 하위 요소인 div, p 및span에 표시됩니다.

2. 클래스 선택기(모든 브라우저는 클래스 선택기를 지원하지만 다중 클래스 선택기(.className1.className2)는 ie6에서 지원되지 않습니다.)

클래스 선택기는 앞에 " ."가 붙은 클래스 이름을 기준으로 선택합니다. mark는 문서 요소와 독립적인 방식으로 스타일을 지정합니다. 클래스 선택기를 사용하기 전에 html 요소에 클래스 이름을 정의해야 합니다. 즉, html 마크업에 클래스 이름이 있는지 확인해야 합니다. .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #2DC4CB;
			}

		</style>
	</head>
	<body>
		<div class="demo">类选择器</div>
	</body>
</html>

렌더링:


CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

3. 요소 선택기(모든 브라우저에서 지원) 요소 선택기(태그 이름 선택기)는 CSS3 선택기 중 가장 일반적이고 기본적인 선택기입니다. 요소 선택기는 실제로 html, body, p, div 등과 같은 문서의 요소입니다. 다음 예에서는 범위 요소가 선택되고 글꼴 색상이 빨간색으로 설정됩니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
			}
			span{
			    color: red;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里使用<span>元素选择器</span>改变了样式</p>
		</div>
	</body>
</html>

Rendering:


CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

4. ID 선택기 (모든 브라우저에서 지원)

ID 선택기는 위에서 언급한 클래스 선택기와 매우 유사합니다. ID를 추가해야 합니다. 스타일 선택기에서 해당 요소를 찾을 수 있도록 먼저 html 문서에 이름을 지정합니다. 차이점은 클래스를 사용할 때 ID 선택기가 해당 클래스 이름 앞에 있다는 것입니다. ." 기호(.className)를 추가하고 ID 선택기는 (#demo)와 같이 이름 앞에 "#"을 사용합니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style>
			#demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}

		</style>
	</head>
	<body>
		<div id="demo">ID选择器</div>
	</body>
</html>

렌더링:

CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

ID 선택기에는 특별한 주의가 필요한 여러 장소가 있습니다:

첫 번째: ID 선택기는 페이지에서 고유하기 때문에 문서에서 한 번만 사용할 수 있습니다.

둘째, id 선택자는 클래스 선택자와 같이 조합해서 사용할 수 없으며, 요소 이름은 하나의 ID 이름으로만 지정할 수 있습니다.

셋째, 동일한 id 이름은 "test."와 같이 다른 문서에서 사용할 수 있습니다. "html"에서는 h1에 #important"가 설정되어 있고, "test1.html"에서는 p의 id를 "#important"로 정의할 수도 있지만, test.html이나 test1에서는 하나의 id만 허용된다는 전제가 있습니다. .html "#important"의 존재.

5. 그룹 선택기(모든 브라우저에서 지원)

여러 요소가 동일한 스타일 속성을 갖는 경우 함께 명령문을 호출하고 요소를 쉼표로 구분할 수 있습니다. 그룹 선택자는 동일한 스타일을 가진 요소를 그룹화합니다. 각 선택자는 규칙에 여러 개의 다른 선택자가 포함되어 있음을 브라우저에 알려줍니다. 쉼표가 없으면 표현되는 의미가 완전히 다릅니다. 쉼표는 앞서 언급한 하위 선택자가 됩니다. 이를 사용할 때 주의해야 합니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>群组选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}
			p,li{
			    color: blue;
			}
			.demo1,.demo2{
			 	color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里是一个段落!</p>
		    <ul><li>列表</li></ul>
		    <a href="#" class="demo1">链接一</a><br>
		    <span class="demo2">文字文字!</span>
		</div>
	</body>
</html>

렌더링:

CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)

위 내용은 CSS 선택기란 무엇입니까? CSS3의 5가지 공통 기본 선택기(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.