이 글에서는 CSS의 5가지 기본 선택자(요소 선택자, 클래스 선택자, ID 선택자, 와일드카드 선택자, 속성 선택자)를 살펴보고 이러한 기본 선택자의 우선순위에 대해 이야기하는 것이 모든 사람에게 도움이 되기를 바랍니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
선택기란 무엇인가요? CSS 선택기의 기능은 CSS 규칙에 따라 HTML 페이지의 하나 이상의 요소를 배치하는 것입니다. 브라우저가 HTML 페이지를 구문 분석할 때 CSS 규칙의 선택기를 기반으로 HTML 페이지의 요소를 찾고 해당 요소에 대한 스타일을 설정합니다. [추천 학습: css 비디오 튜토리얼]
CSS의 중추로서 CSS 선택기는 인간의 척추처럼 기능하며, THML 구조, 브라우저 동작 및 사용자 동작과 상호 의존적이고 상호 작용하여 CSS 선택기로 연결됩니다. 매우 중요한 부분. 여기서 "선택자"는 일반적으로 사용되는 CSS 선언 블록 앞에 있는 태그, 클래스 이름 등을 나타냅니다. 다음 코드에 표시된 대로:
div {
color: lightcoral;
font-size: 24px;
}여기의 div는 선택기입니다.
선택기 분류CSS는 첫 번째 버전에서 세 번째 버전으로 발전하면서 CSS 선택기의 유형이 점점 더 복잡해졌습니다. 현재 CSS 선택자의 분류는 다음과 같습니다.
기본 선택자: CSS 선택자의 가장 기본적인 사용법인 기본 선택자가 5개 있습니다.
레벨 선택기: HTML 요소 간의 관계를 기반으로 HTML 요소를 찾는 4가지 레벨 선택기가 있습니다.
결합 선택기: 교차와 합집합이라는 두 가지 용도가 있습니다. 이전 기본 선택기와 계층적 선택기를 결합한 것입니다.
의사 클래스 선택기: HTML 페이지에 포함되지 않은 상태 정보가 있는 HTML 요소를 선택할 수 있습니다.
의사 요소 선택기: HTML을 포함하지 않는 모든 항목을 찾습니다.
이제 기본 선택자를 먼저 살펴보고 다른 선택자에 대해서는 나중에 소개하겠습니다.
| Description | ||
|---|---|---|
| p {color:red;} 모든< ;p> 요소를 선택하세요. | 클래스 선택기 | |
| class='mystyle' | id selector | |
| 모든 태그 요소 선택 with id="myid" | 범용 선택기/와일드카드 선택기 | |
| *myid {color:red;}모든 요소 선택 | 속성 선택기 | |
| 모든 ID 속성 요소를 선택하세요 | 1、元素选择器 元素选择器 又称为 类型选择器，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。 语法结构如下所示： 元素名 {
属性 : 属性值;
}로그인 후 복사 值得注意是 类型选择器的元素名是不区分大小写的。 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型选择器</title>
<style>
/* 选择标签名为 h1 的元素，设置字体的颜色为红色 */
h1 {
color: lightcoral;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
</body>
</html>로그인 후 복사 代码运行结果如下图所示： 2、类选择器 类选择器 是通过HTML元素的 语法结构如下所示： .类名 {
属性 : 属性值;
}로그인 후 복사 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
/* 设置所有带有 title 类名的元素 */
.title {
color: lightsalmon;
}
</style>
</head>
<body>
<!-- 为 h1 h2 h3 元素增加一个 title 的类名，可以通过类选择器统一控制 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
</body>
</html>로그인 후 복사 代码运行结果如下图所示：
在HTML中可以为一个元素添加多个类名，示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.title {
color: lightsalmon;
}
/* 任意选择一个类名设置即可 */
.h3 {
color: lawngreen;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 多个类型通过空格进行分割 -->
<h3 class="title h3">二级标题</h3>
</body>
</html>로그인 후 복사 代码运行结果如下图所示：
3、ID选择器 ID选择器 和类选择器 类似，都是根据某个属性来匹配HTML元素的，类选择器匹配的是 语法结构如下： #ID {
属性 : 属性值;
}로그인 후 복사 用法与类选择器类似，这里不做赘述。只需要注意 一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。 即元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！ 示例： #div1{
background:rgb(200,200,0);
color:blue;
font-size:20px;
}로그인 후 복사 运行结果 <p>这是一个段落</p> <p id="div1">这是一个段落</p> 로그인 후 복사
4、通用选择器 通用选择器 又称为通配符选择器 ，是一个星号（ 语法结构如下所示： * {
属性 : 属性值;
}로그인 후 복사 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: lightskyblue;
}
/* 由于通配符选择器的优先级最低，可以随意覆盖 */
p {
color: #333;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落文本</p>
</body>
</html>로그인 후 복사 代码运行结果如下图所示： 5、属性选择器 属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中 CSS中的属性选择器还可以分为两种，如下所示
接下来我们将分别讨论这两类属性选择器 属性值直接匹配选择器 属性值直接匹配选择器还可以分为4种，如下所示：
语法结构如下所示： [attr] {
属性 : 属性值;
}로그인 후 복사 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选中所有id属性 */
[id] {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="title1">白月初</h1>
<h1 id="title2">东方月初</h1>
<h1 id="title3">涂山苏苏</h1>
<h1 id="title4">涂山红红</h1>
<h1 id="title5">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>로그인 후 복사 代码运行结果如下图所示：
语法结构如下所示： [attr=value] {
属性 : 属性值;
}로그인 후 복사 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选择 id 属性为 title1 的元素 */
[id=title1] {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="title1">白月初</h1>
<h1 id="title2">东方月初</h1>
<h1 id="title3">涂山苏苏</h1>
<h1 id="title4">涂山红红</h1>
<h1 id="title5">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>로그인 후 복사 代码运行结果如下图所示：
示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 匹配所有id属性中包含 name4 的元素 */
[class~=name4] {
color: cornflowerblue;
}
/* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
[class |="name"] {
color: lawngreen;
}
</style>
</head>
<body>
<h1 id="title1" class="name-1 title ">白月初</h1>
<h1 id="title2" class="name2 title ">东方月初</h1>
<h1 id="title3" class="name-3 title ">涂山苏苏</h1>
<h1 id="title4" class="name4 title ">涂山红红</h1>
<h1 id="title5" class="name-5 title ">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>로그인 후 복사 代码运行结果如下图所示： 属性值正则匹配选择器属性值正则匹配选择器还可以分为3种，如下所示：
语法结构如下所示： [attr^=value] {
属性 : 属性值;
}
[attr$=value] {
属性 : 属性值;
}
[attr*=value] {
属性 : 属性值;
}로그인 후 복사 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 匹配以 name 开头的元素，设置字体颜色为蓝色 */
[class ^=name] {
color: blue;
}
/* 匹配以 human 结尾的元素，设置字体大小为 2.6rem */
[class $=human] {
font-size: 2.6rem;
}
/* 匹配包含 em 的元素，设置字体颜色为红色 */
[class *=em] {
color: red;
}
</style>
</head>
<body>
<h1 class="name human">白月初</h1>
<h1 class="name human">东方月初</h1>
<h1 class="name demon">涂山苏苏</h1>
<h1 class="name demon">涂山红红</h1>
<h1 class="name demon">涂山雅雅</h1>
<h1 class="name human">王权富贵</h1>
</body>
</html>로그인 후 복사 代码运行结果如下图所示： 选择器优先级问题引入
浏览器根据css样式渲染某一个元素时，会遵循一定的规则，一般来说有以下的优先级规则，我们将其量化为特异性值。 CSS选择器的优先级别有着严格的规定，我们可以将其划分为0~5这6个级别，在这6个级别中，前4个的等级由CSS选择器决定，后两个等级由我们书写的形式和特性语法决定。具体如下所示
* {
color: #000;
}로그인 후 복사
下面我们来看一个例子 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个demo</title>
<style>
#myid{color:red;}
.myclass1{color:yellow;}
h1,p {color:green;}
</style>
<body>
<h1 style="color: blue;" id="myid">这是一个标题，请查看优先级</h1>
<p id="myid">这是一个段落，请查看优先级</p>
</body>
</head>
</html>로그인 후 복사 我们可以看到因为标签 有行内样式，所以它显示为了蓝色；而标签 虽然定义了三种css样式，但是由于id选择器的优先级最高，所以显示为了红色 (동영상 공유 학습: 웹 프론트엔드 시작하기) 위 내용은 CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요! 본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹사이트에서 입력 요소를 가져올 수 없습니다.
그래서 Twitter에서 입력 요소를 가져오려고 하는데 실행하면 노드 터미널에서 계속 이런 오류가 발생하고 결과적으로 이 코드로 생성된 브라우저 창이 저절로 닫힙...
에서 2024-04-06 18:59:57
0
1
442
모든 것을 시도했지만 여전히 HTML 콘텐츠가 표시되지 않습니다.
기본적으로 html 문서의 내용은 브라우저에 아무 것도 표시되지 않습니다. 내가 만든 이 HTML 문서는 다른 HTML 파일에서 링크되었습니다. 브라우저에서 이 ...
에서 2024-04-04 19:16:15
0
1
3496
관련 주제
더>
|
下图展示了类选择器的分析结构：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
