伪类和伪元素的区别（详解）

欢迎加入qq群(IT-程序猿-技术交流群)：757345416

定义

• 伪类：用于向某些选择器添加特殊的效果
• 伪元素：用于将特殊的效果添加到某些选择器

伪类

例：

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

说明：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
• 伪类名称对大小写不敏感。

伪元素

• CSS2 - :before 伪元素

“:before”伪元素可以在元素的内容前面插入新的内容

p:before{
content:"这是添加的";
} 

• CSS2 - :after 伪元素

“:after “伪元素可以在元素的内容后面插入新的内容

p:after {
content:"这是添加的";
} 

使用伪元素清除浮动：

.clearfix::after {
            content: "\20";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }



.clearfix {
            zoom: 1;
          }

注意：

• 伪类与伪元素都是用于向选择器加特殊效果
• 伪类与伪元素的本质区别就是是否抽象创造了新元素
• 伪类只要不是互斥可以叠加使用
• 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
• 伪类与伪元素优先级分别与类、标签优先级相同

文章结束，希望对你的学习有帮助！