집 > 기사 > 웹 프론트엔드 > CSS의 기본 선택자는 무엇입니까

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

青灯夜游원래의: 2021-11-02 18:25:229466검색

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의 기본 선택자는 무엇입니까

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

代码块

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	

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

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

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	

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

结果图

类选择器

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

nbsp;html>

	
		<meta>
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	

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

结果图
注意：只要是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元素的字体颜色，设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	

	
		<h2>成功不是击败别人，而是改变自己。</h2>
		<span>成功不是击败别人，而是改变自己。</span>

结果图
注意：结合元素选取器执行原理说明如下：首先是先找到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>

결과 사진 CSS의 기본 선택자는 무엇입니까

🎜🎜

🎜

태그 선택기🎜🎜🎜다음으로 태그 선택기 실습에 들어갑니다. 저자는 삽입된 형식을 사용하여 글꼴을 사용합니다. `h1` 태그의 색상과 HTML 페이지의 `p` 태그가 빨간색으로 설정되어 있습니다. 🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 사진🎜🎜🎜🎜🎜
🎜🎜참고: 태그 선택기는 지정된 태그에 대한 스타일 설정을 참조합니다. 🎜🎜🎜🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 이미지
🎜🎜🎜🎜이제 모두가 `p` 태그가 변경되지 않은 이유를 알아야 합니다. 태그 선택기의 역할은 지정된 태그 스타일을 설정하기 위해 다음으로 `p` 태그의 글꼴 색상을 빨간색으로 설정했습니다. 🎜🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 이미지
🎜🎜🎜
Class Selector🎜🎜🎜다음으로 저자는 내장된 형식을 사용하여 속성을 사용합니다. `HTML` 글꼴 페이지에서 `h1` 태그와 `p` 태그를 완성하려면 클래스 값을 `.box`로 지정하세요. 색상은 빨간색으로 설정했습니다. 🎜🎜먼저 `HTML` 페이지의 첫 번째 `h1` 태그의 글꼴 색상을 빨간색으로 설정합니다. 🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 이미지
🎜🎜🎜🎜참고: `class` 속성의 값이 `.box`인 한, 어떤 라벨에 관계없이 즉, 글꼴 색상은 빨간색으로 설정되고 나머지 `CSS` 스타일은 동일합니다. 🎜🎜🎜🎜이제 두 번째 `h1` 태그와 `p` 태그의 글꼴 색상을 빨간색으로 설정했습니다. 🎜🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 이미지
🎜🎜🎜
Id selector🎜🎜🎜다음으로 `id` 선택기 실습을 입력해 보겠습니다. 양식에서 작성자는 `HTML` 페이지에서 `h1` 태그를 변경하기 위해 `#box`로 `id` 속성 값을 사용합니다. 의 글꼴 색상은 빨간색으로 설정되었습니다. 🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 이미지🎜🎜 8. png" alt="CSS의 기본 선택자는 무엇입니까"/>
🎜🎜🎜🎜참고: `id` 선택기 사용 지정된 `id` 속성 값으로 스타일을 설정하는 것입니다. 그러나 `id` 속성 값은 `HTML` 페이지에서 고유해야 합니다. 🎜🎜🎜
Combined element selector🎜🎜🎜🎜다음으로 요소 선택기 결합 연습을 시작해 보겠습니다. 저자는 삽입된 형식에서 `h2` 태그를 사용합니다. `class` 속성 중 `.box` 요소의 글꼴 색상은 빨간색으로 설정됩니다. 🎜🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜결과 이미지
🎜🎜🎜🎜참고: 요소 선택기의 실행 원리는 다음과 같이 설명됩니다. 먼저 `h2` 태그를 찾은 다음 `h2` 태그에서 `class` 속성 값이 `.box`인지 찾으세요. `class` 속성 값이 있으면, 값은 `.box`입니다. 스타일만 지정하면 됩니다. 이제 `span` 태그 아래의 `class` 속성 값이 `.box`이고 렌더링되지 않는 이유를 모두가 알아야 합니다. 🎜🎜🎜

Multi-class selector 🎜🎜🎜🎜 다음으로, 저자는 `class 속성 값에는 빨간색으로 설정된 <code>.box` 및 `.box1` 요소의 글꼴 색상이 포함됩니다. 🎜🎜🎜🎜코드 블록🎜🎜🎜rrreee🎜🎜🎜
참고: 다중 카테고리 선택기의 실행 원리를 다음과 같이 설명합니다. 우선 `class`属性值可以设置为多个以空格隔开即可，举例：如果一个`class`属性值包含`.box`和`.box1`将其设置样式，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。现在大家应该知道了单独的`class`属性值为`.box`和`.box1`는 렌더링되지 않습니다.

(학습 영상 공유: css 영상 튜토리얼)

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

성명：

이전 기사：HTML의 중국어 의미는 무엇입니까다음 기사：HTML의 중국어 의미는 무엇입니까