CSS 常用伪类和伪元素

本文首发于边玉杰的技术博客

转载请注明出处

伪类

一个 CSS 伪类是以一个冒号（ : ）作为前缀，被添加到一个选择器末尾的关键字，可以让指定的元素在特定的状态呈现指定的样式。例如 :hover，当用户悬停在指定元素时，可以在这个状态给指定元素添加相应的样式，是在 DOM 树无法描述的状态下才能给元素添加样式。

首先，下方的正方形都没有背景色：

image

1、:first-child

:first-child 表示在一组兄弟元素中的第一个元素

/* 所有正方形都没有背景色，因为此时选中的是 <p> 标签*/
<div class="list">
     <p>.square 这是一个p标签</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-child{
     background: orangered;
}

效果如下：

image

/* 第 1 个正方形有背景色，因为此时选中的是第一个 .square */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-child{
     background: orangered;
}

效果如下：

image

2、:first-of-type

:first-of-type 表示一组兄弟元素中指定类型的第一个元素

/* :first-of-type 选择在父元素中第一个出现的 .square
而不管其在兄弟内的位置如何，第一个正方形有背景色 */
<div class="list">
     <p>.square 这是一个p标签</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:first-of-type{
     background: orangered;
}

效果如下：

image

3、:last-child

:last-child 表示在一组兄弟元素中的最后一个元素（类似 :first-child）

/* :last-child 此时选中的是最后一个 .square
最后一个正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:last-child{
     background: orangered;
}

效果如下：

image

4、:last-of-type

:last-of-type 表示一组兄弟元素中指定类型的最后一个元素（类似 :first-of-type）

/* :last-of-type 选择在父元素中最后一个出现的 .square
而不管其在兄弟内的位置如何，最后一个正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:last-of-type{
     background: orangered;
}

效果如下：

image

5、:not

:not 一个否定伪类，用于匹配不符合参数选择器的元素

/* 不含有 .not 的正方形有背景色*/
<div class="list">
     <div class="square not"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square not"></div>
</div>

.square:not(.not){
     background: orangered;
}

效果如下：

image

6、:nth-child(an+b)

:nth-child 这个 CSS 伪类首先会找到当前元素的兄弟元素，然后按照位置的先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...）。如果 an+b 为 0，无法选中任何元素

6-1、:nth-child(4) 匹配位置为 4 的元素

/*第 3 个正方形有背景色 因为第 3 个正方形在所有兄弟元素中排第 4 */
<div class="list">
     <p>.square 这是一个p标签</p>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(4) {
     background: orangered;
}

效果如下：

image

 /*此时第 4 个正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(4) {
     background: orangered;
}

效果如下：

image

6-2、:nth-child(2n) 匹配位置为2、 4、6、8... 的元素，可以使用 :nth-child(even) 代替

/*第 2、 4、6、8 个正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(2n) {
     background: orangered;
}

效果如下：

image

6-3、:nth-child(2n+1) 匹配位置为1、 3、5、7... 的元素，可以使用 :nth-child(odd) 代替

/*第 1、 3、5、7 个正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(2n+1) {
     background: orangered;
}

效果如下：

image

6-4、:nth-child(3n) 匹配位置为 3、6、9... 的元素

/*第 3、6 个正方形有背景色 */
<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-child(3n) {
     background: orangered;
}

效果如下：

image

7、:nth-of-type(an+b)

:nth-of-type 与 nth-child 相似，不同之处在于它是只匹配特定类型的元素

<div class="list">
     <p>.square 这是一个p标签</p> 
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
</div>

.square:nth-of-type(4) {
     background: orangered;
}

效果如下：

image

8、:nth-last-child(an+b)

:nth-last-child 与 nth-child 相似，它是从最后一个子元素开始计数的

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

.square:nth-last-child(4) {
     background: orangered;
}

效果如下：

image

9、:nth-last-of-type

:nth-last-of-type 与 nth-of-type 相似，不同之处在于它是从最后一个子元素开始计数的

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

.square:nth-last-of-type(4) {
     background: orangered;
}

效果如下：

image

伪元素

伪元素的前缀是两个冒号 ( :: ) ，同样是添加到选择器后面去选择某个元素的某个部分。伪元素创建了不存在 DOM 树中的元素，并为其添加样式。例如，::after 选择元素后，在其内容后使用 content 添加内容。虽然可以看到添加的内容，但是这些内容实际上不存在 DOM 树中

1、::after(:after)

使用 ::after 会创建一个伪元素，该伪元素会成为选中元素的最后一个子元素

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

p::after{
     content: "✨✨";
}

效果如下：

image

2、::before(:before)

使用 ::before 会创建一个伪元素，该伪元素会成为选中元素的第一个子元素

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

p::before{
     content: "✨✨";
}

效果如下：

image

3、::first-letter(:first-letter)

::first-letter 选中某块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

p::first-letter{
     color: red;
}

效果如下：

image

4、::first-line(:first-line)

::first-line 在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。和其他所有的伪元素一样，::first-line 不能匹配任何真实存在的 html 元素。::first-line 伪元素只能在块容器中，所以，::first-line 伪元素只能在一个 display 值为 block,，inline-block，table-cell 或者 table-caption 中有用

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

p::first-line{
     color: red;
}

效果如下：

image

5、::selection

::selection 用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）

<div class="list">
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <div class="square"></div>
     <p>.square 这是一个p标签</p>
</div>

p::selection{
     background-color: #ffeb3b;
}

使用鼠标选中亮字，效果图：

image

兼容性

伪类的兼容性：

image

伪元素的兼容性：

image

元素兼容性查看

最后编辑于：2020.03.27 14:41:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,657评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,662评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,143评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,732评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,837评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,036评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,126评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,868评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,315评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,641评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,773评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,470评论 4赞 333
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,126评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,859评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,095评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,584评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,676评论 2赞 351

CSS 常用伪类和伪元素

伪类

1、:first-child

2、:first-of-type

3、:last-child

4、:last-of-type

5、:not

6、:nth-child(an+b)

6-1、:nth-child(4) 匹配位置为 4 的元素

6-2、:nth-child(2n) 匹配位置为2、 4、6、8... 的元素，可以使用 :nth-child(even) 代替

6-3、:nth-child(2n+1) 匹配位置为1、 3、5、7... 的元素，可以使用 :nth-child(odd) 代替

6-4、:nth-child(3n) 匹配位置为 3、6、9... 的元素

7、:nth-of-type(an+b)

8、:nth-last-child(an+b)

9、:nth-last-of-type

伪元素

1、::after(:after)

2、::before(:before)

3、::first-letter(:first-letter)

4、::first-line(:first-line)

5、::selection

兼容性

伪类的兼容性：

伪元素的兼容性：

推荐阅读更多精彩内容