CSS3系列 02 元素选择器
2024-06-30 04:17:26
基本选择器
* 通用选择器
*会选择所有元素，无视层级。常用于做样式清除，如内边距、外边距清除等。
示例如下，将所有的标签元素文本设置为红色：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>* {color: red;}</style>
</head><body><div><span>span element</span><mark>mark element</mark><time>time element</time></div><p>p element</p>
</body></html>
渲染结果：
E 名字选择器
名字选择器可通过标签名进行选择，无视层级。
示例如下，仅将p标签的文本设置为红色：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>p {color: red;}</style>
</head><body><div><span>span element</span><mark>mark element</mark><time>time element</time></div><p>p element</p>
</body></html>
渲染结果：
# ID选择器
根据标签的id属性来选择元素，无视层级，因HTML标签的id属性具有唯一性，故该选择器每次只能选择一个元素。
它以#作为关键字，后面跟上id即可。
示例如下，将id属性为a的标签文本设置为红色：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>#a {color: red;}</style>
</head><body><div><span>span element</span><mark id="a">mark element</mark><time>time element</time></div><p>p element</p>
</body></html>
渲染结果：
. 类选择器
根据标签的class属性来选择元素，无视层级，因HTML标签的class属性不具有唯一性，故该选择器一次可以选择多个元素。
它以 . 作为关键字，后面跟上class即可。
示例如下，将class属性为inline的标签文本设置为红色：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>.inline {color: red;}</style>
</head><body><div><span class="inline">span element</span><mark class="inline">mark element</mark><time class="inline">time element</time></div><p>p element</p>
</body></html>
渲染结果：
组合选择器
Feature 交集选择器
交集选择器可以从一组具有特性的共同的元素中取出一个具有独特特征的元素。
示例如下，有2个div：
- 一个div的id为a
- 一个div的class为a
若我们想选择其中的一个进行渲染，则必须要使用到交集选择器：
- 标签名字是div且id是a的标签会选择出第一个div
- 标签名字是div且class是a的标签会选择出第二个div
由于这种性质，交集选择器也可被称为特征选择器，示例如下：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>div#a {color: blue;}div.a {color: red;}</style>
</head><body><div id="a">div-id-a</div><div class="a">div-class-a</div>
</body></html>
渲染结果：
E, F 并集选择器
并集选择器可通过逗号来一次选取多个元素。
示例如下，将mark和time标签的文本设置为红色：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>mark,time {color: red;}</style>
</head><body><div><span>span element</span><mark>mark element</mark><time>time element</time></div><p>p element</p>
</body></html>
渲染结果：
E F 后代选择器
后代选择器可以寻找某个元素下的特定元素，它的寻找层级是没有上限的，关键字为空格，
示例如下，我们需要寻找div中嵌套的article中的id为a的mark标签，可直接通过后代选择器进行查找：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>div mark#a {color: red;}</style>
</head><body><div><article><time>time element</time><mark id="a">mark element</mark></article><section><time>time element</time><mark id="b">mark element</mark></section></div><p>p element</p>
</body></html>
渲染结果：
E > F 子代选择器
子代选择器可以寻找某个元素子级下的特定元素，它的寻找层级为1层，关键字为>。
示例如下，我们需要寻找div中嵌套的article中的id为a的mark标签，通过子代查找器就必须严格的对元素关系进行书写，不能跨代：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>div>article>mark#a {color: red;}</style>
</head><body><div><article><time>time element</time><mark id="a">mark element</mark></article><section><time>time element</time><mark id="b">mark element</mark></section></div><p>p element</p>
</body></html>
渲染结果：
E + F 同级毗邻选择器
E+F会查找紧随E元素后的F元素。
即通过哥哥元素找紧挨着自己的弟弟元素。
示例如下：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>/* div的后面必须是p，p的前面也必须是div */div+p {color: red;}</style>
</head><body><div>div</div><p>p</p><div>div</div><p>p</p><p>p</p>
</body></html>
渲染结果：
E ~ F 同级多跨选择器
E~F会查找在E元素后的所有F元素。
即通过哥哥元素找自己的所有弟弟元素。
示例如下：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>/* div后面的所有p */div~p {color: red;}</style>
</head><body><div>div</div><span>span</span><p>p</p><p>p</p><article>article</article><p>p</p>
</body></html>
渲染结果：
伪类选择器
动态伪类选择器
动态伪类选择器是比较常用的一种伪类选择器，如表所示：
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上 |
| E:active | 用户行为选择器 | 选择匹配的E元素，且匹配元素被激活。常用于链接锚点和按钮上 |
| E:hover | 用户行为选择器 | 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
| E:focus | 用户行为选择器 | 选择匹配的E元素，而且匹配元素获取焦点时的行为 |
动态伪类选择器主要针对a标签：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>/* 没点过是红色 */a:link {color: red;}/* 点击时是绿色 */a:active {color: green;}/* 点过后是蓝色 */a:visited {color: blue;}/* 鼠标悬浮时出现阴影 */a:hover {box-shadow: #ddd 10px 2px 3px;}/* 获得焦点时显示边框 */a:focus {border: 1px solid red;}</style>
</head><body><a href="#a">click me</a><div id="a"></div>
</body></html>
目标伪类选择器
目标伪类选择器只有1个，如表所示：
| 选择器 | 功能描述 |
|---|---|
| :target | 匹配a标签所指向的锚点 |
这个常用在a标签上，当点击这个a标签后，与这个a标签对应的锚点标签发生变化，示例如下：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>:target {background-color: red;}</style>
</head><body><a href="#first">link first</a><div id="first">first element</div><hr><a href="#second">link second</a><div id="second">second element</div><hr><a href="#third">link third</a><div id="third">third element</div>
</body></html>
渲染结果：
状态伪类选择器
状态伪类选择器主要针对input标签，如表所示：
| 选择器 | 示例 | 说明 |
|---|---|---|
| :enabled | input:enabled | 选择每个启用的 input 元素 |
| :disabled | input:disabled | 选择每个禁用的 input 元素 |
| :checked | input:checked | 选择每个被选中的 input 元素 |
| :required | input:required | 选择包含required属性的元素 |
| :optional | input:optional | 选择不包含required属性的元素 |
| :valid | input:valid | 选择验证通过的表单元素 |
| :invalid | input:invalid | 选择验证不通过的表单 |
这些都很好理解，所以这里就不再进行演示了。
否定伪类选择器
否定伪类选择器只有1个，如表所示：
| 选择器 | 功能描述 |
|---|---|
| E:not(F, G) | 匹配所有E元素，包含F或者G条件的除外，如果直接使用:not(ele, ele)则相当于反选所有标签 |
示例如下，选择所有class属性为a的元素，h1排除在外：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>.a:not(h1) {color: red;}</style>
</head><body><h1 class="a">h1 element</h1><p class="a">p element</p><div class="a">div element</div>
</body></html>
渲染结果：
结构伪类选择器
结构伪类选择器是最常用的选择器，如表所示：
| 择器 | 功能描述 |
|---|---|
| :root | 匹配根元素，即html标签 |
| E:first-child | 匹配E元素，并且E元素要作为第一个子元素出现 |
| E:last-child | 匹配E元素，并且E元素要作为最后的子元素出现 |
| E:nth-child(n) | 根据位置匹配正数第n个子元素E。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0 |
| E:nth-last-child(n) | 根据位置匹配倒数第n个子元素E。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同 |
| E:nth-of-type(n) | 根据类型匹配正数第n个E元素 |
| E:nth-last-of-type(n) | 根据类型匹配倒数第n个E元素 |
| E:first-of-type | 根据类型匹配第一个E元素 |
| E:last-of-type | 根据类型匹配最后一个E元素 |
| E:only-child | 匹配独生子E元素 |
| E:only-of-type | 匹配只有一个孩子的E元素 |
| E:empty | 匹配没有孩子的E元素 |
注意事项：
- :nth-child(n) 中参数只能是n，不可以用其他字母代替
- :nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd)选择的却是偶数项·
这些选择器刚开始理解可能很难，但是用习惯了后会发现真的非常方便。
下面是案例代码：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>:root {/* 直接使用root，选择的是html标签 */background-color: wheat;}h1:first-child {/* h1必须是第一个子元素，刚好body标签的第一个子元素就是h1 */color: blue;font-size: 3rem;}main:last-child {/* main必须是最后一个子元素，刚好body标签的最后一个子元素就是main */border: 1px solid #ddd;background-color: aqua;}main p:nth-child(2) {/* 选择main标签下的第二个子标签，该子标签必须为p */background-color: red;}ul li:nth-last-child(2) {/* 选择ul标签下的倒数第二个子标签，该子标签必须为li */background-color: aquamarine;}ul li:nth-of-type(1) {/* 选择ul标签下的第一个子标签，该子标签必须为li */background-color: deeppink;}ul li:nth-last-of-type(3) {/* 选择ul标签下的倒数第三个子标签，该子标签必须为li */background-color: deepskyblue;}li:first-of-type {/* 第一个出现的li标签 */font-size: 1.5rem;}li:last-of-type {/* 最后一个出现的li标签 */font-size: .9rem;}aside:only-child {/* 选择是独生子的标签，且该标签必须是aside标签 */font-size: 1.8rem;}footer:only-of-type {/* 选择只有一个儿子的标签，且该标签必须是footer标签 */background-color: aquamarine;}section:empty {/* 选择没有后代的标签(也包括文本)，且改标签必须是section */height: 2rem;border: red 1px solid;}</style>
</head><body><h1>hello world</h1><header><nav><ul><li>li-1</li><li>li-2</li><li>li-3</li></ul></nav></header><main><div>div</div><p>p</p><article>article</article><section></section></main><footer><aside>aside</aside></footer>
</body></html>
属性选择器
属性选择器经常用到，使用它的时候应该考虑到和其他选择器一起搭配使用，如交集选择器。
| 选择器 | 功能描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素 |
| [attribute=value] | 用于选取带有指定属性和值的元素 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素 |
| [*attribute*=*value] | 匹配属性值中包含指定值的每个元素 |
示例如下，匹配type为text的input标签：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>input[type=text]{background-color: red;}</style>
</head><body><form action="#"><input type="text"><input type="password"><input type="text"></form>
</body></html>
渲染结果：
如果想匹配checked或者disabled这种属性名和属性值一样的标签元素，则只需要输入属性名即可：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>input[type=text][disabled]{background-color: red;}</style>
</head><body><form action="#"><input type="text" disabled><input type="password"><input type="text"></form>
</body></html>
渲染结果：
文本选择器
文本选择器用的比较少，如表所示：
| 选择器 | 功能描述 |
|---|---|
| ::first-line | 匹配文本首行 |
| ::first-letter | 匹配文本首字母 |
| ::selection | 匹配被鼠标划中的文本 |
如下示例：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>blockquote::first-line{color:blue;}blockquote::first-letter{font-size: 2rem;}blockquote::selection{background-color: yellow;}</style>
</head><body><cite>--狂人日记</cite><br><blockquote>凡事总需研究，才会明白，古来时常吃人，我也还记得，可是不甚清楚。<br>我翻开历史一查，这历史没有年代，歪歪斜斜的每页上都写着“仁义道德”几个字。<br>我横竖睡不着，仔细看了半夜，才从字缝里看出来，满本都写着两个字是“吃人”！</blockquote>
</body></html>
渲染结果：
文本插入器
文本插入器有2个：
| 插入器 | 描述 |
|---|---|
| ::before | 使用 contnet 属性生成额外的内容并插入在标记中，插在前面 |
| ::after | 使用 content 属性生成额外的内容并插入在标记中，插在后面 |
相当于在被选中标签中再插入2个普通的inline标签，注意这2个标签的content的属性是必须的，它规定被插入标签的内容。
此外还需要注意，新插入的内容会改变原标签的大小，所以谨慎使用。
示例如下：
<!DOCTYPE html>
<html lang="en"><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>Document</title><link rel="stylesheet" href="./css_reset.css"><style>div {color: yellowgreen;}div::before {content: "before";color: deeppink;}div::after {content: "after";color: deepskyblue;}</style>
</head><body><div> mid </div>
</body></html>
渲染结果：
CSS3系列 02 元素选择器相关推荐
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- CSS3系列一（概述、选择器、使用选择器插入内容）
阅读目录 CSS3模块化结构 CSS历史发展 CSS3属性选择器 通用型伪类选择器 CSS3结构性伪类选择器 CSS3 UI元素状态伪类选择器 CSS3 层级关系选择器 使用选择器来插入内容 回到顶部 ...
- web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
- CSS基础(part21)--CSS3伪元素选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3伪元素选择器 伪类选择器: 选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 伪类选择 ...
- CSS3简介、新增选择器、属性选择器、伪元素选择器、伪元素
CSS3知识点: CSS3的相关属性不兼容低版本浏览器,IE9以下是不兼容的,在实际开发中要特别注意,移动端支持优于PC端,是在CSS2上新增的属性,关于兼容这里有两个名词需要了解: 渐进增强 :(针 ...
- 伪元素选择器使用场景-字体图标(CSS3)
伪元素选择器使用场景-字体图标(CSS3) <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3)
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3) <!DOCTYPE html> <html lang="en"><head>< ...
- 【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- html5新增的伪类选择器有,CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）...
在css3提供的新选择器之前,选择一个元素需要借助id或者class,css3新增的选择器可以更灵活的去选择需要的元素,那css3提供了哪些好用的选择器呢? 首先就是属性选择器,我们可以通过属性选择器 ...
最新文章
- 再造人类生命的神奇细胞Human.Life.Our.Amazing.Cell
- SAP中执行没有权限的事务
- VS2015 Cordova实现WebView加载页面进度条（Android）
- 微信小程序组件化 快速实现可用模态窗
- DockerFile 参数详解
- sugarnms网管软件实用吗?
- linux基本指令chmod,Linux 常用命令
- 8、jeecg 笔记之 自定义word 模板导出（一）
- 《学习究竟是什么》思维导图笔记
- 如何用Vue实现一个全选指令
- linux下进程的创建代码,Linux下进程创建分析
- HttpClient的简单使用--HttpGET和HttpPost
- 孔浩老师SpringMVC视频总结
- redis数据库实例
- 如何彻底的删除hao123_hao123太流氓！怎么从电脑彻底清除？
- 学习java和html必须要知道的英文单词(入门单词,包括C#)
- 加载大尺寸图片不清晰,加载原图（ImageLoader，Glide）
- 使用汽车VIN码识别的好处有哪些
- 前端面试宝典。向未来开启计划
- FreeType移植到 STM32 单片机以支持矢量字体