일반적으로 사용되는 CSS3 기본 선택자는 무엇입니까?-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

일반적으로 사용되는 CSS3 기본 선택자는 무엇입니까?

青灯夜游

Dec 20, 2021 am 10:51 AM

css기본 선택기

일반적으로 사용되는 CSS3 기본 선택기: 1. 와일드카드 선택기 "*"; 2. 클래스 선택기 ".class name" 4. ID 선택기 "#id name"; ,F,..."는 동일한 스타일을 가진 요소를 그룹화할 수 있습니다. 각 선택기를 구분하려면 쉼표 ","를 사용하세요.

일반적으로 사용되는 CSS3 기본 선택자는 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3의 5가지 공통 기본 선택자

1. 와일드카드 선택자(모든 브라우저에서 지원)

범용 선택자는 *로 표시되며 모든 요소를 선택하거나 특정 요소를 선택할 수 있습니다. under;

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

리셋 스타일 파일에서 위의 코드를 많이 보셨을 겁니다. 이는 모든 요소의 여백과 패딩이 0으로 설정되고 다른 하나는 14px로 설정된다는 의미입니다. is 특정 요소 아래의 모든 요소 선택:

<!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:

데모 요소의 세 하위 요소 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>

Rendering:

3. 요소 선택기(모든 브라우저에서 지원)

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

<!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:

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

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>

렌더링:

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>

렌더링: