CSS 选择器[下]

最新推荐文章于 2021-06-04 15:28:20 发布

xiaoxiaobukuang

最新推荐文章于 2021-06-04 15:28:20 发布

阅读量525

点赞数

分类专栏： HTML5 文章标签： css 选择器

本文链接：https://blog.csdn.net/xiaoxiaobukuang/article/details/78318969

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

伪类选择器总汇
结构性伪类选择器
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、子元素选择器

我是儿子
1. 我是孙子
2. 我是孙子
3. 我是孙子
我是儿子
我是儿子
我是儿子

我是儿子

①、: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;
}

解释：定位到锚点时，选择此元素。

xiaoxiaobukuang

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 选择器[下]

伪类选择器总汇结构性伪类选择器 UI伪类选择器动态伪类选择器其他伪类选择器一、伪类选择器汇总伪类选择器分为四种类型：结构性伪类、UI伪类、动态伪类和其他伪类选择器。选择器名称说明 CSS版本
复制链接

扫一扫

专栏目录

CSS 选择器[下]

一、伪类选择器汇总

二、结构性伪类选择器

1、根元素选择器

2、子元素选择器

①、:first-child

②、:last-child

③、:only-child

④、:only-of-type

3、:nth-child(n)系列

①、li:nth-child(2)

②、:nth-last-child(2)

③、:nth-of-type(2)

④、:nth-last-of-type(2)

三、UI伪类选择器

1、:enabled

2、:disabled

3、:checked

4、:default

5、:valid和:invalid

6、:required和:optional

四、动态伪类选择器

1、:link和visited

2、:hover

3、:active

4、:foucs

五、其他伪类选择器

1、:not

2、:empty

3、:lang

4、target

“相关推荐”对你有帮助么？