前端-6-伪类选择器、伪元素选择器、结构性伪类选择器

伪类选择器

4个伪类选择器：l-v-h-a

1. :link

   a:link{color:red}	/*未被访问的链接*/
   

2. :visited

   a:visited{color:blue}}	/*已被访问的链接*/
   

3. :hover

   a:hiver{cursor:pointer}	/*鼠标移动到链接上*/
   

4. active

   a:active{color:pink}	/*正被点击的链接*/
   

伪元素选择器

4个伪元素选择器：first-line、first-letter、before、after

1. :first-line 选中第一行

2. :first-letter 选中第一个字母

3. :before 在某个元素前插入内容

4. :after 在某个元素后插入内容

   <style>
       div{
           width: 50px;
           height: 50px;
           background: #9cdfed;
           border-radius: 50%;
       }
       div:after{
           content: "";
           width: 30px;
           height: 30px;
           background: #e6c1e0;
           display: block;
           position: relative;
           left: 10px;
           top: 10px;
       }
   <