这是【CSS 教程系列第 12 篇】,如果觉得有用的话,欢迎关注专栏。
CSS 的选择器有很多,常用的有 元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器 等。
本篇博客说的是伪类选择器,详细内容如下
文章目录
- 一:伪类选择器
- 1:写法
- 2:举例说明
- 3:搭配其它选择器
- 4:所有 CSS 伪类/元素
- 表格一:a 元素
- 表格二:p 元素
- 表格三:input 元素
- 表格四:其它伪类 / 伪元素
一:伪类选择器
作用
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,比如可以选择第 1 个,第 n 个元素。
为什么叫伪类选择器
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的 id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式。
当状态改变时,它又会失去这个样式。由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类。
1:写法
首先写上你用到的选择器,然后在其后面加一个英文冒号":",在冒号后面写上用到的伪元素即可。如 a:hover
伪元素就是 CSS 用来添加一些选择器的特殊效果。
2:举例说明
这里我以"锚伪类"说一下伪类选择器的用法。
我们知道,链接有四种状态,分别为 未访问的链接、已访问的链接、鼠标悬停到链接以及选定的链接。
这里我写一个 a 链接,看一下这四种状态,CSS 代码如下
a:link {color: black;} /*未访问的链接显示 "黑色"*/
a:visited {color: green;} /*已访问的链接显示 "绿色"*/
a:hover {color: red;} /*鼠标悬停到链接显示 "红色"*/
a:active {color: yellow;} /*选定的链接显示 "黄色"*/
让我们通过 gif 来看一下伪类选择器的演示效果,如下所示
需要说明一下,你访问过的链接,即使你刷新浏览器颜色也不会回到 a:link 时的黑色,你需要把该链接对应的 cookies 以及历史记录全部清理掉才可以。
特别注意
这四个伪元素不是随便写的,其中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。而 a:active 也必须被置于 a:hover 之后,才是有效的。
这四个伪元素的顺序不需要去死记,可以巧记为 " l v 包包非常 ha o ",红色英文字母取的是每个伪元素的首字母。
3:搭配其它选择器
并不是只有 a 元素才可以用伪类选择器,你也可以用其它元素,后面写上伪元素就行了。
这里我举一个伪类选择器搭配类选择器的例子,要实现的功能也很简单,就是鼠标经过文本时,颜色改为蓝色。
HTML 代码如下
<p class="myClass">不必每分钟都学习,但求学习中每分钟都有收获</p>
CSS 代码如下
.myClass:hover{color: blue;}
浏览器运行效果如下
4:所有 CSS 伪类/元素
这里参考 菜鸟教程的伪类/伪元素教程 ,我重新整理了一下资料,将原来举例中的"同一元素的选择器"整理到同一个表格。
再次声明:不是说在这个表格的只能这个元素才能用,我这边只是整理了原链接的例子,特此强调。
表格一:a 元素
序号 | 选择器 | 示例 | 功能说明 |
---|---|---|---|
1 | link | a: link | 选择所有未访问链接 |
2 | visited | a: visited | 选择所有访问过的链接 |
3 | active | a: active | 选择正在活动的链接 |
4 | hover | a: hover | 把鼠标放在链接上的状态 |
表格二:p 元素
序号 | 选择器 | 示例 | 功能说明 |
---|---|---|---|
1 | empty | p: empty | 选择所有没有子元素的 p 元素 |
2 | first-of-type | p: first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
3 | last-of-type | p: last-of-type | 选择的每个 p 元素是其母元素的最后一个 p 元素 |
4 | last-child | p: last-child | 选择所有 p 元素的最后一个子元素 |
5 | not(selector) | :not(p ) | 选择所有 p 以外的元素 |
6 | nth-child(n) | p: nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
7 | nth-last-child(n) | p: nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
8 | nth-last-of-type(n) | p: nth-last-of-type(2) | 选择所有 p 元素倒数第二个为 p 的子元素 |
9 | nth-of-type(n) | p: nth-of-type(2) | 选择所有 p 元素第二个为 p 的子元素 |
10 | only-of-type | p: only-of-type | 选择所有仅有一个子元素为 p 的元素 |
11 | only-child | p: only-child | 选择所有仅有一个子元素的 p 元素 |
12 | first-letter | p : first-letter | 选择每个 p 元素的第一个字母 |
13 | first-line | p: first-line | 选择每个 p 元素的第一行 |
14 | first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 p 元素 |
15 | before | p: before | 在每个 p 元素之前插入内容 |
16 | after | p: after | 在每个 p 元素之后插入内容 |
17 | lang(language) | p:lang(it) | 为 p 元素的 lang 属性选择一个开始值 |
表格三:input 元素
序号 | 选择器 | 示例 | 功能说明 |
---|---|---|---|
1 | checked | input: checked | 选择所有"选中"的表单元素 |
2 | disabled | input: disabled | 选择所有"禁用"的表单元素 |
3 | enabled | input: enabled | 选择所有"启用"的表单元素 |
4 | in-range | input: in-range | 选择元素指定范围內的值 |
5 | invalid | input: invalid | 选择所有无效的元素 |
6 | optional | input: optional | 选择没有"required"的元素属性 |
7 | out-of-range | input: out-of-range | 选择指定范围以外的值的元素属性 |
8 | read-only | input: read-only | 选择"只读"属性的元素属性 |
9 | read-write | input: read-write | 选择"没有只读"属性的元素属性 |
10 | required | input: required | 选择有"required"属性指定的元素属性 |
11 | valid | input: valid | 选择所有有效值的属性 |
12 | focus | input:focus | 选择元素输入后具有焦点 |
表格四:其它伪类 / 伪元素
序号 | 选择器 | 示例 | 功能说明 |
---|---|---|---|
1 | root | root | 选择文档的根元素 |
2 | target | #news: target | 选择当前活动 #news 元素(点击 URL 包含锚的名字) |
你的问题得到解决了吗?欢迎在评论区留言。
赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。
技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。
结束语
最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。
更多推荐
【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
发布评论