- 伪类选择器总汇
- 结构性伪类选择器
- UI伪类选择器
- 动态伪类选择器
- 其他伪类选择器
一、伪类选择器汇总
伪类选择器分为四种类型:结构性伪类、UI伪类、动态伪类和其他伪类选择器。
选择器 | 名称 | 说明 | CSS版本 |
---|---|---|---|
:root | 根元素选择器 | 选择文档中根元素 | 3 |
:first-child | 子元素选择器 | 选择元素中第一个子元素 | 2 |
:last-child | 子元素选择器 | 选择元素中最后一个子元素 | 3 |
:only-child | 子元素选择器 | 选择元素中唯一子元素 | 3 |
:only-of-type | 子元素选择器 | 选择指定类型中唯一子元素 | 3 |
:nth-child(n) | 子元素选择器 | 选择指定N个元素 | 3 |
:enabled | UI选择器 | 选择启动状态元素 | 3 |
:disabled | UI选择器 | 选择禁用状态元素 | 3 |
:checked | UI选择器 | 选择被选中input勾选元素 | 3 |
:default | UI选择器 | 选择默认元素 | 3 |
:valid | UI选择器 | 验证有效选择inout元素 | 3 |
:invalid | UI选择器 | 验证无效选择inout元素 | 3 |
:required | UI选择器 | 有required属性选择元素 | 3 |
:optional | UI选择器 | 无required属性选择元素 | 3 |
:link | 动态选择器 | 未访问的超链接元素 | 1 |
:visited | 动态选择器 | 已访问的超链接元素 | 1 |
:hover | 动态选择器 | 悬停在超链接上的元素 | 2 |
:active | 动态选择器 | 激活超链接上的元素 | 2 |
:foucs | 动态选择器 | 获取焦点的元素 | 2 |
:not | 其他选择器 | 否定选择的元素 | 3 |
:empty | 其他选择器 | 选择没有任何内容的元素 | 3 |
:lang | 其他选择器 | 选取包含lang属性的元素 | 2 |
:target | 其他选择器 | 选取URL片lang属性的元素 | 3 |
二、结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀(:)。
1、根元素选择器
在.css文件中输入:
:root {
border: 1px solid red;
}
解释:匹配文档中的根元素,基本不怎么用,因为总是返回<html>元素。
2、子元素选择器
- 我是儿子
- 我是孙子
- 我是孙子
- 我是孙子
- 我是儿子
- 我是儿子
- 我是儿子
- 我是儿子
①、:first-child
在.css文件中输入:
ul > li {
color: blue;
}
<br>
ul li {
color: yellow;
}
<br>
ul > li:first-child {
color: red;
}
<br>
ul li:first-child {
color: red;
}
<br>
li:first-child {
color: yellow;
}
<br>
:first-child {
color: red;
}
<br>
解释:选择第一个子元素
②、:last-child
在.css中输入:
ul > li:last-child {
color: orange;
}
解释:选择最后一个子元素
③、:only-child
在.css中输入:
ul > li:only-child {
color: red;
}
解释:选择只有一个子元素的那个子元素。
④、:only-of-type
<div>
<p>我是段落</p>
<span>我不是段落</span>
</div>
<div>
<p>我是段落</p>
<p>我是段落</p>
</div>
<br>
在.css中输入:
div > p:only-of-type {
color: red;
}
解释:选择只有一个指定类型的子元素的那个子元素。
3、:nth-child(n)系列
①、li:nth-child(2)
在.css中输入:
ul > li:nth-child(2){
color: red;
}
解释:选择子元素的第二个元素。
②、:nth-last-child(2)
在.css中输入:
ul > li:nth-last-child(2) {
color: red;
}
解释:选择子元素倒数第二个元素。
③、:nth-of-type(2)
在.css中输入:
div > p:nth-of-type(2) {
color: red;
}
解释:选择特定子元素的第二个元素。
④、:nth-last-of-type(2)
在.css中输入:
div > p:nth-last-of-type(2) {
color: red;
}
解释:选择特定子元素的倒数第二个元素。
三、UI伪类选择器
UI伪类选择器是根据元素的状态匹配元素。
<form>
<input text="text" disabled>
<input text="text">
</form>
1、:enabled
在.css中输入:
input:enabled {
border: 1px solid red;
}
解释:选择启用状态的元素。
2、:disabled
在.css中输入:
input:disabled {
border: 1px solid blue;
}
解释:选择禁用状态的元素。
3、:checked
<form>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<button>提交</button>
</form>
在.css中输入:
input:checked {
display: none;
}
解释:选择勾选的input元素
4、:default
<form>
音乐<input type="checkbox" name="music" value="1" checked>
体育<input type="checkbox" name="sport" value="2">
<button>提交</button>
</form>
在.css中输入:
:default {
display: none;
}
解释:从一组类似的元素中选择默认元素。比如inout被勾选的即默认的。
5、:valid和:invalid
<form>
<input type="text" required>
<input type="email" required>
<button>提交</button>
</form>
在.css中输入:
input:valid {
border: 1px solid orange;
}
<br>
input:invalid {
border: 1px solid red;
}
解释:输入验证合法与不合法显示时选择的元素。
6、:required和:optional
<form>
<input type="text">
<input type="email" required>
<button>提交</button>
</form>
在.css中输入:
input:required {
border: 1px solid blue;
}
input:optional {
border: 1px solid green;
}
解释:根据是否具有required属性选择元素。
四、动态伪类选择器
动态伪类选择器根据条件的改变匹配元素。
<a href="http://www.baidu.com">百度</a>
<a href="http://www.so.com">好搜</a>
1、:link和visited
在.css中输入:
a:link {
color: red;
}
<br>
a:visited {
color: blue;
}
解释:link表示未访问过的超链接,:visited表示已访问过的超链接。
2、:hover
在.css中输入:
a:hover {
color: orange;
}
解释:表示鼠标悬停在超链接上。
3、:active
在.css中输入:
a:active {
color: green;
}
解释:表示鼠标按下激活超链接时。
4、:foucs
<input type="text">
在.css中输入:
input:focus {
border: 1px solid red;
}
解释:表示获得焦点时。
五、其他伪类选择器
1、:not
<a href="http://www.baidu.com">百度</a>
<a href="http://www.so.com">好搜</a>
在.css中输入:
a:not([href*="baidu"]) {
color: red;
}
解释:否定选择器,反选。
2、:empty
<b>加粗</b>
<p></p>
<b>加粗</b>
<br>
在.css中输入:
p:empty {
display: none;
}
解释:匹配没有任何内容的元素。
3、:lang
<p lang="en-us">HTML5</p>
在.css中输入:
:lang(en) {
color: red;
}
解释:选择包含lang属性,属性值前缀为en的元素。和属性选择器匹配的结果一致。
4、target
<b id="target">加粗</b>
在.css中输入:
b:target {
color: red;
}
解释:定位到锚点时,选择此元素。