伪类与伪元素的区别

太过爱你忘了你带给我的痛 2022-05-22 03:05 295阅读 0赞

#### W3C关于伪类伪元素的定义 ####

*  伪类：用于向某些选择器添加特殊的效果。
 *  伪元素：将特殊的效果添加到某些选择器上。
    
    明确两点：  
    1 都与选择器相关  
    2 特殊效果，这两者描述了其他css无法描述的东西

#### 种类 ####

*  伪类：  
    :active、:focus、:hover、:link、:visited、:first-child（将特殊的样式添加到元素的第一个子元素）、:lang（允许创作者来定义指定的元素中使用的语言）
    
    这里注意：a标签相关的伪类的顺序：:link，:visited，:hover，:active（可以用 love hate 来记忆）
 *  伪元素：  
    :first-letter（将特殊的样式添加到文本的首字母）、:first-line（将特殊的样式添加到文本的首行）、:before（使用content属性在某元素之前插入某些内容）、:after（在某元素之后插入某些内容）
    
    注意：  
    对于:before和:after必须配合content属性使用，添加的内容不会改变文档结构，不可复制，仅仅是在CSS渲染层加入，display默认值为inline（尽量用来显示一些修饰性的内容，如图标，也可以用:after清除浮动）  
      
    
    
    #### 伪类和伪元素的区别 ####
    
    以伪类中的:first-child和伪元素中的:first-letter为例：  
    :first-child：用于选取属于其父元素的首个子元素的指定选择器。  
    :first-letter：用于选取指定选择器的首字母。

First
 Second

p>i:first-child{ color: red; }

效果：  
![这里写图片描述][70]

**如何模拟上述效果? 添加类**

First
 Second

.first-child{ color: red; }

再看伪元素的效果及模拟：

Hello world

p:first-letter{ color: coral; }

效果：  
![这里写图片描述][70 1]  
**如何模拟上述效果?添加元素**

Hello world

span{ color:red; }

这也是为什么叫做伪类，为什么叫做为元素的原因。

#### 伪元素与元素的区别 ####

1.  伪元素无法通过JS获取其DOM
2.  伪元素无法通过浏览器开发者工具直接查看
3.  伪元素默认是 inline

#### 使用伪元素的注意事项 ####

1.  使用伪元素before,after必须设置content
2.  使用伪元素before,after显示背景图，一定要使用display设置为块元素
3.  使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle

#### 总结 ####

为了区分伪类和伪元素，CSS3明确规定伪类用一个单引号表示，伪元素用一个双引号表示。  
由于兼容性问题，单引号表示伪元素仍然可以使用。

[70]: /images/20220522/8aa1f39af94846bc87945a578c84e5df.png
[70 1]: /images/20220522/52a322be5a664db48bf553c6cc0af2d4.png