#07你认真学了css？伪类和伪元素

文档阅读：

总结伪类与伪元素 | AlloyTeamwww.alloyteam.com!

前文回顾：

#00你认真学了css？

一、伪类：

1、定义

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化

2、类型

image

3、应用场景

用伪类元素进行效果展示
（1）link visited hover active 顺序

/* 未访问的链接 */
 a:link{  color: blue;  }  
a:visited{  color: green;  }  
/* 点击后鼠标脱离，获得焦点的链接 */ 
 a:focus{  color: grey;  }
  /*鼠标悬停时，内容颜色获得红色 */ 
 a:hover{  color: red;  } 
 /*选择活动链接*/  
a:active{  color: pink;  }

image

（2）first-child VS first-of-type

• h1:first-child :选择是h1并且它是长子的元素
• h1:first-of-type:选择是h1并且它是它父亲里h1类型中的长子的元素
  
  

  image

关于first-childVSfirst-of-type的使用在之前的css系列博客文章中有详细解释：
#00你认真学了css？​

二、伪元素

1、定义

伪元素用于创建一些不在文档树中的元素，并为其添加样式

2、类型

image

如：

image

3、:before 和 :after（也可以写::before和 ::after）

    
这是第一段
  
   

image

使用伪元素before和after的好处：

• 可以在后台发现，p的前后分别出现::before和::after。html的dom树中原本没有::before和::after，现通过css样式添加，使其在dom树中添加这两个元素。
• 用添加::before和::after 的目的是为了省标签。::before生成的效果，所在的位置位于父元素（如box）的第一个子元素，::after则位于父元素（如box）的最后一个子元素，即在html的dom树上多了两个子元素，这两个子元素无需在html中体现，只需在css中表示即可。
• ::before和::after所展示的效果相当于一个行内元素（注意行内元素的一些特性）
• 其中content 是必不可少

4、伪类选择器的应用场景

（1）伪类选择器应用于清除浮动

.clearfix:after {
    content:'';
    display:block;
    clear:both;
}

详细解释请回看之前我写得关于浮动的副作用和解决办法：

#03你认真学了css？（基本样式3：浮动+定位）

（2）伪类选择器可作为替代标签

用代码替代图片，如使用css3实现一个带边框的三角符

思路：边框+三角符号的组合

先确认边框样式：

.bubble{
            position: relative;
            padding: 10px;
            border-radius: 3px;  /*可填可不填*/
            background: #fff;
            border: 1px solid #000;     
                        display: inline-block; 
        }

    

        hello world
    

再确认三角样式：

.bubble:before{
            content:'';
            width: 10px;
            height: 10px;
            border-left: 1px solid #000;
            border-top: 1px solid #000;
            background: #fff;
            display: inline-block;
                        position: absolute;
                        transform: rotateZ(45deg);  
                        top: -6px;
        }

    

        hello world
    
 

这里基础的三角样式我们在之前已经有涉及过怎么使用：

请戳
#01你认真学了css？（基本样式1）

使用伪元素怎么实现三角符号（css3 ）：

基础代码：（关于三角形的位置参数可以使用页面后台进行调试）

    
    
    


    

        hello world
    

结果：

image

运用以上知识举一反三，实现以下效果：

image

代码请戳：
我的代码

（3）伪类选择器应用于element：checked;（勾选住的一个状态）

即input元素的自定义重要属性checkbox或者radio，实现一个自定义的样式

如：笑脸切换

/*今天的心情:*/
 

好处：

• 没有加js
• 使用该属性样式，对于input来说已经实现勾选状态，自定义加一些自己的图片，自动加载信息

（4）伪类选择器应用于字体图标

A、为什么针对字体库而来的字体，我们可以调整它的字体大小和颜色？

image

B、完整代码如下：

在css中添加这个:

/*  \e605为字体库中的特有的一种编码形式：unicode码  */
.icon-jirengulogojichu2：before{content:'\e605';} 

即：

image