CSS의 기본 선택자는 무엇입니까-프런트엔드 Q&A-php.cn

CSS의 기본 선택기는 다음을 참조합니다: 1. 와일드카드 선택기, 3. 클래스 선택기, 5. 결합 요소 선택기,

CSS의 기본 선택자는 무엇입니까

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

기본 선택자 소개

기본 선택자는 와일드카드 선택자, 태그 선택자, 클래스 선택자, ID 선택자, 결합 요소 선택자, 다중 클래스 선택자 등 6가지 사용 방법으로 구분됩니다.
기본 선택기 사용 지침 시트.

Selector	구문 형식	의미	Example
와일드 카드 선택기	*{속성: 값;}	범용 선택기는 모든 요소를 선택할 수 있습니다. 페이지에 스타일을 적용합니다. *로 표시됩니다. IE6에서는 지원하지 않으며 대규모 웹사이트에서는 부담이 커질 수 있으므로 사용하지 않는 것이 좋습니다.	*{너비: 300px;}
태그 선택기	태그 이름 {속성: 값;}	해당 HTML 태그와 일치하는 태그 선택기.	h1{color: red;}
클래스 선택기	.class 속성 값 {속성: 값;}	클래스 선택기는 지정된 클래스 속성 값을 사용하여 요소의 스타일을 설정합니다.	.box{color: red;}
Id 선택기	#id 속성 값 {attribute: value;}	Id 선택기, HTML 문서에서 Id 선택기는 한 번만 사용됩니다. ID 선택자는 #으로 정의됩니다.	#box{color: red;}
요소 선택기와 결합	태그 이름 .class 속성 값 {속성: 값}	선택기는 지정된 .class 속성을 포함하는 태그 이름을 기반으로 요소를 선택합니다. 값.	p.box {color:red;}
다중 클래스 선택기	.class 속성 값.class 속성 값 {속성: 값;}	두 클래스 선택기를 함께 연결하여 두 가지를 모두 포함하는 요소만 선택 순서에 관계없이 이러한 클래스 이름 중 하나를 선택합니다. 참고: IE7 이전 버전에서는 다양한 플랫폼의 Internet Explorer가 다중 유형 선택기를 올바르게 처리하지 못했습니다.	.box.box1{색상:빨간색;}

와일드카드 선택기

다음으로, 저자는 HTML 페이지에서 h1 태그와 p를 결합하기 위해 삽입된 형식을 사용합니다. 태그의 글꼴 색상은 빨간색으로 설정됩니다. HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

로그인 후 복사

结果图

CSS의 기본 선택자는 무엇입니까

标签选择器

接下来让我们进入标签选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

로그인 후 복사

结果图

CSS의 기본 선택자는 무엇입니까

注意：标签选择器是指给指定的标签设置样式。

代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

로그인 후 복사

结果图
现在大家应该知道了p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将p标签的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

로그인 후 복사

结果图

类选择器

接下来让我们进入类选择器实践，笔者以嵌入式的形式，使用类的属性值为.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。
首先我们将HTML页面中的第一个h1标签字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 class="box">成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

로그인 후 복사

结果图
注意：只要是class属性的值为.box的标签，不管它是什么标签，都会将字体颜色设置为红色，其余的CSS样式也是一致。
现在我们将第二个h1标签和p标签字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>

<body>
    <h1 class="box">成功不是击败别人，而是改变自己。</h1>
	<h1 class="box">PHP中文网</h1>
	<p class="box">PHP中文网</p>
</body>
</html>

로그인 후 복사

结果图

Id选择器

接下来让我们进入id选择器实践，笔者以嵌入式的形式，通过id属性值为#box，将HTML页面中的h1标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="box">成功不是击败别人，而是改变自己。</h1>
	</body>
</html>

로그인 후 복사

结果图
注意：使用id选择器是给拥有指定的id属性值来设置样式，但是要注意在一个HTML页面中id的属性值必须是唯一的。

结合元素选择器

接下来让我们进入结合元素选择器实践，笔者以嵌入式的形式，通过h2标签class属性值为.box元素的字体颜色，设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box">成功不是击败别人，而是改变自己。</h2>
		<span class="box">成功不是击败别人，而是改变自己。</span>
	</body>
</html>

로그인 후 복사

结果图
注意：结合元素选取器执行原理说明如下：首先是先找到h2标签，然后再去h2标签中找class属性值为.box，如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。

多类选择器

接下来让我们进入多类选择器实践，笔者以嵌入式的形式，将class属性值包含.box和.box1
```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类选择器</title>
		<style>
			.box.box1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
		<span class="box box1">成功不是击败别人，而是改变自己。</span>
		<h2 class="box1 ">PHP中文网</h2>
		<span class="box">PHP中文网</span>
	</body>
</html>
```
로그인 후 복사
결과 사진
🎜🎜🎜
태그 선택기🎜🎜🎜다음으로 태그 선택기 실습에 들어갑니다. 저자는 삽입된 형식을 사용하여 글꼴을 사용합니다. h1 태그의 색상과 HTML 페이지의 p 태그가 빨간색으로 설정되어 있습니다. 🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 사진🎜🎜🎜🎜🎜

위 내용은 CSS의 기본 선택자는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!