伪类元素选择器仿土豆效果实现方案(73)

当年我们是怎么做的呢?是利用加入多个盒子标签,现在我们学习了伪元素就可以使得结构html变的非常简单明了了! 

伪类元素选择器仿土豆效果实现方案(73)

这是以前的代码: 

 有很多子div套在里面。

伪类元素选择器仿土豆效果实现方案(73)

我们现在删除掉子盒子 

伪类元素选择器仿土豆效果实现方案(73)

原来的: 

伪类元素选择器仿土豆效果实现方案(73)

改后的: 

伪类元素选择器仿土豆效果实现方案(73)

伪类元素选择器仿土豆效果实现方案(73)

鼠标经过有效果: 

伪类元素选择器仿土豆效果实现方案(73)

伪类元素选择器仿土豆效果实现方案(73)

伪类元素选择器仿土豆效果实现方案(73)

伪类元素选择器使用过程中标签之间是不能有空格的,这一点一定要记清哟!否则会失效! 

伪类元素选择器仿土豆效果实现方案(73)

伪类元素选择器仿土豆效果实现方案(73)