CSS的伪元素

伪类
通常用于对链接的不同状态以添加样式效果，他可以帮助我们根据链接的状态（访问前，访问后，鼠标悬停在链接上，链接被点击时但鼠标未松开）定义不同的样式

四种选择器:

---

link（链接访问前的样式），:vistited（链接访问后的样式），:hover（鼠标悬停在链接上的样式），:active（链接被激活时（鼠标左键按下但还未抬起）的样式）。

这四个伪类选择器通常一起使用，以创建具有丰富交互效果的链接和按钮

由于浏览器会将存储访问记录 所以通常显示的都是访问后的状态访问前的样式需要删除访问记录后正常显示

<style>
          #a1:link{
   color: blueviolet;
}
 
#a1:visited{
   color: rgb(0, 238, 255);
}
 
#a1:hover{
   color: green;
}
 
#a1:active{
   color: red;
}
    
    </style>

 

 

 

---

伪元素
是一种特殊的选择器，它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。一个选择器中只能使用一个伪元素，且必须紧跟在简单选择器之后。标准的做法是使用：：来区分伪类和伪元素

::after：在元素内容之后插入内容

::before：在元素内容之前插入内容

<style>
          ul li{
            /* 将无序列表前面默认的圆点标注去除 */
            list-style: none;
            width: 15%;
            height: 30px;
            background-color: aqua;
            border: 2px aquamarine solid;
        }
 
        ul::before{
            /* 下面这两句样式设置为固定语法，可以不做理解 */
            content: "";
            /* 让这个伪元素变成块元素 */
            display: block;
 
            width: 15%;
            height: 30px;
            background-color: darkorange;
            border: 2px turquoise solid;
        }
 
        ul::after{
            /* 下面这两句样式设置为固定语法，可以不做理解 */
            content: "";
            /* 让这个伪元素变成块元素 */
            display: block;
 
            width: 15%;
            height: 30px;
            background-color: darkorange;
            border: 2px turquoise solid;
        }
 
        #li1::after{
            /* 下面这两句样式设置为固定语法，可以不做理解 */
            content: "";
            /* 让这个伪元素变成块元素 */
            display: block;
 
            width: 15%;
            height: 30px;
            background-color: darkorange;
            border: 2px turquoise solid;
        }
    </style>

 

---

注意事项

这四个选择器需要按照：link，：vistited，：hover，：active从前到后的顺序不能颠倒，否则可能会影响浏览器渲染

---

 在定义伪元素时，必须定义content属性; ，伪元素本身是行内元素，如果要定义为其配置宽高则需要定义display属性为 block;（转为块级元素）或者line-bolck（行内块元素）