前端学习总结【101天】：CSS——区分伪类与伪元素

随便叨叨

• 今天是我前端学习之路的第101天。

• 看了一篇大神的文章详解 CSS 属性 - 伪类和伪元素的区别，打算自己也回顾下，写个简版，便于记忆

学习总结

一、伪类种类

:active —— 样式添加到正在被激活的元素
:focus —— 样式添加到获得焦点的元素
:hover —— 样式添加到鼠标悬浮的元素
:link —— 样式添加到未被访问过的链接
:visited —— 样式添加到已经访问过的链接
:first-child —— 样式添加到第一个子元素
:lang —— 样式添加到指定lang语言的标签

二、伪元素种类

:first-letter —— 样式添加到文本首字母
:first-line —— 样式添加到文本首行
:before —— 样式添加到元素之前
:after —— 样式添加到元素之后

三、两者区别

1、伪类

伪类若这样设置

p:first-child {
    color: red;
}

<div>
    <p>我是文本</p>
    <p>我是文本</p>
</div>

等同于

.test {
    color: red;
}

<div>
    <p class="test">我是文本</p>
    <p>我是文本</p>
</div>

2、伪元素

伪元素若这样设置

p:first-letter {
    color: red;
}

<div>
    <p>我是文本</p>
    <p>我是文本</p>
</div>

等同于

span {
    color: red;
}

<div>
    <p><span>我</span>是文本</p>
    <p>我是文本</p>
</div>

四、总结

• 伪类的效果需要一个实际的类才能达到，而伪元素需要一个实际的元素才能达到。

• 伪类可以同时运用多个，而伪元素只能一次用一个。

• 伪类用一个：伪元素用：：

• 为兼容性考虑需要使用：