이 글에서는 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、通用选择器 通用选择器 又称为通配符选择器 ,是一个星号( 语法结构如下所示: * { 属性 : 属性值; } 示例代码如下: nbsp;html> <meta> <meta> <meta> <title>通配符选择器</title> <style> * { color: lightskyblue; } /* 由于通配符选择器的优先级最低,可以随意覆盖 */ p { color: #333; } </style> <h1>一级标题</h1> <h2>二级标题</h2> <p>段落文本</p> 代码运行结果如下图所示: 5、属性选择器 属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素,在官方文档中类选择器和ID选择器都属于属性选择器,因为本质上类选择器是HTML元素中 CSS中的属性选择器还可以分为两种,如下所示
接下来我们将分别讨论这两类属性选择器 属性值直接匹配选择器 属性值直接匹配选择器还可以分为4种,如下所示:
语法结构如下所示: [attr] { 属性 : 属性值; } 示例代码如下: nbsp;html> <meta> <meta> <title>属性选择器</title> <style> /* 选中所有id属性 */ [id] { color: cornflowerblue; } </style> <h1>白月初</h1> <h1>东方月初</h1> <h1>涂山苏苏</h1> <h1>涂山红红</h1> <h1>涂山雅雅</h1> <h1>王权富贵</h1> 代码运行结果如下图所示:
语法结构如下所示: [attr=value] { 属性 : 属性值; } 示例代码如下: nbsp;html> <meta> <meta> <title>属性选择器</title> <style> /* 选择 id 属性为 title1 的元素 */ [id=title1] { color: cornflowerblue; } </style> <h1>白月初</h1> <h1>东方月初</h1> <h1>涂山苏苏</h1> <h1>涂山红红</h1> <h1>涂山雅雅</h1> <h1>王权富贵</h1> 代码运行结果如下图所示:
示例代码如下: nbsp;html> <meta> <meta> <title>属性选择器</title> <style> /* 匹配所有id属性中包含 name4 的元素 */ [class~=name4] { color: cornflowerblue; } /* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */ [class |="name"] { color: lawngreen; } </style> <h1>白月初</h1> <h1>东方月初</h1> <h1>涂山苏苏</h1> <h1>涂山红红</h1> <h1>涂山雅雅</h1> <h1>王权富贵</h1> 代码运行结果如下图所示: 属性值正则匹配选择器属性值正则匹配选择器还可以分为3种,如下所示:
语法结构如下所示: [attr^=value] { 属性 : 属性值; } [attr$=value] { 属性 : 属性值; } [attr*=value] { 属性 : 属性值; } 示例代码如下: nbsp;html> <meta> <meta> <title>属性选择器</title> <style> /* 匹配以 name 开头的元素,设置字体颜色为蓝色 */ [class ^=name] { color: blue; } /* 匹配以 human 结尾的元素,设置字体大小为 2.6rem */ [class $=human] { font-size: 2.6rem; } /* 匹配包含 em 的元素,设置字体颜色为红色 */ [class *=em] { color: red; } </style> <h1>白月初</h1> <h1>东方月初</h1> <h1>涂山苏苏</h1> <h1>涂山红红</h1> <h1>涂山雅雅</h1> <h1>王权富贵</h1> 代码运行结果如下图所示: 选择器优先级问题引入
浏览器根据css样式渲染某一个元素时,会遵循一定的规则,一般来说有以下的优先级规则,我们将其量化为特异性值。 CSS选择器的优先级别有着严格的规定,我们可以将其划分为0~5这6个级别,在这6个级别中,前4个的等级由CSS选择器决定,后两个等级由我们书写的形式和特性语法决定。具体如下所示
* { color: #000; }
下面我们来看一个例子 nbsp;html> <meta> <title>这是一个demo</title> <style> #myid{color:red;} .myclass1{color:yellow;} h1,p {color:green;} </style> <h1>这是一个标题,请查看优先级</h1> <p>这是一个段落,请查看优先级</p> 我们可以看到因为标签 有行内样式,所以它显示为了蓝色;而标签 虽然定义了三种css样式,但是由于id选择器的优先级最高,所以显示为了红色 (동영상 공유 학습: 웹 프론트엔드 시작하기) |
위 내용은 CSS의 기본 선택자에 대한 자세한 설명과 선택자 우선순위에 대해 이야기합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!