H5C3基础学习总结之伪类、伪类选择器、伪元素、伪元素选择器

伪类

针对于超链接来说：

• :link 表示一个普通的链接（未访问过的链接）
• :visited 表示访问过的链接

注意细节：浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色

:hover（盘旋，徘徊）  
    鼠标移入的链接，也可以为其他元素设置hover  
:active  
    正在被点击的链接，也可以为其他元素设置active  
:focus  
    表示元素获取焦点的状态，一般用于文本框  
::selection（注意有两个冒号）  
    表示内容被选中的状态  
    在火狐中使用::-moz-selection来代替  

子元素的伪类

:first-child  
    寻找父元素的第一个子元素，**在所有的子元素中排序**（前面不指定特定元素就表示全部元素,指定就是交集选择器）  
:last-child  
    寻找父元素的最后一个子元素，在所有的子元素中排序  
:nth-child  
    寻找父元素中的指定位置子元素，在所有的子元素中排序  
    例子  
        p:nth-child(3)  
        可以使用even，来找到偶数的子元素  
        可以使用odd，来找到奇数的子元素  
:first-of-type  
    寻找指定类型中的第一个子元素  
:last-of-type  
    寻找指定类型中的最后一个子元素  
:nth-of-type  
    寻找指定类型中的指定子元素  

---

伪元素

1. :first-letter 表示第一个字符

2. :first-line 表示文字的第一行

3. :before 表示选择的元素的最前面(一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容)

4. :after 表示选中元素的最后面(一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容）

---

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

选择符	描述
::before	在元素内部的前面出入内容
::after	在元素内部的后面插入内容

注意细节：

• before和after创建一个元素，但是属于行内元素
• 新创建的元素在文档中是找不到的（伪元素特点）
• 语法：  element::before{}
• before和after必须有content属性
• 伪元素选择器和标签选择器一样，权重为1

---

伪元素/伪类的区别

两者的根本区别之阿宇它们是否创造了新的元素。

• 伪元素：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
• 伪元素：用于将特殊的效果添加到某些选择器。
• 伪元素既可以使用“:”，也可以使用“::”

• 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。
• 伪类：用于向某些选择器添加特殊的效果。（根本意思就是就是对那些不能通过class、id等选择元素的补充）
• 伪类只能使用“：”

---