CSS（一）伪元素的巧妙运用

作为前端er，你肯定对a:hovera:visited不陌生.....我还记得把trick记在小本子上：“爱恨纠缠不休”，谁都明白。...伪类和伪元素都是CSS1和CSS2中的概念。CSS1和CSS2中伪类和伪元素的区别比较模糊，有些同事经常把:before和:after称为伪类。CSS3对这两个概念的概念比较明确，在语法上也很明显的将它们区分开来。伪类——伪类CSS3对伪类的定义伪类的意义在于利用选择器寻找DOM树中不存在的、常规CSS选择器获取不到的信息；任何常规选择器都可以在任何地方使用伪类。CSS3对伪元素的定义伪元素在DOM树中创建一些抽象的元素，这些元素在文档语言中是不存在的（可以理解为html源代码）。例如：documen接口不提供访问元素内容的第一个词或行的机制，但伪元素允许开发人员提取此信息。此外，一些伪元素允许开发者获取源文档中不存在的内容（如常见的::before、::after），还可以为伪元素自定义样式。.伪类用于为某些选择器添加特殊效果。伪元素表示元素的子元素。虽然这个子元素在逻辑上存在，但实际上并不存在于文档树中；CSS3中的伪元素使用两个冒号如::first-line（当然为了兼容性较低，也可以使用冒号，大多数浏览器都支持这两种表示，CSS3中新加入的伪元素必须使用::),伪类使用冒号如：悬停。巧妙利用所有伪元素可以实现的东西，真正的子元素也可以实现。只是有时候为了样式和布局而改变html结构并不干净，不值得提倡，于是伪元素就派上用场了。出于本文的目的，我们将讨论限制在巧妙使用::before和::after伪元素上。1.清除浮动#最熟悉的熟练使用.clearfix:after{content:".";显示：块；高度：0；可见性：隐藏；清除：两者；}.clearfix{*缩放：1；}2。添加一个额外的符号到元素div:before{content:open-quote;字体大小：24pt；文本对齐：居中；行高：42px；颜色：#fff；背景：#ddd；向左飘浮;位置：相对；顶部：30px；边界半径：25px；高度：25px；宽度：25px;}div:after{内容：close-quote;字体大小：24pt；：#fff；背景：#ddd；浮动：对；位置：相对；底部：40px；边界半径：25px；高度：25px；宽度：25px；效果#html代码