详解伪类伪元素 自己写一下

1.首先先说伪元素 before after

伪元素说白了，就是类似元素标签一样的存在，但是html中没有对应的元素，伪元素不占用dom元素节点，不存在DOM节点上，所以呢减少DOM操作，但是不利于SEO

伪元素的由两个冒号::开头，当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::

 before after这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。

注意写法，我就吃过亏，用一个： 或2个都不存在问题，为了规范还是写两个吧

页面展示，我去，怎么没有我是谁

原因在于啊这个后面不能有空格，要挨在一起不然不生效，fuck,伪元素还必须要content配合，不然不生效

优点

• 减少dom节点数
• 让css帮助解决部分js问题，让问题变得简单
  • 缺点
不利于SEO
• 无法审查元素，不利于调试

伪元素最主要用来做那个清除浮动的，其实你想嘛，如果非要在元素前面加一个标签，那还不如直接在他前面写哥标签不就行了，所以我一般不用，最多用：：after来清除浮动

.clearIt:after {
    content:"";//使生成的元素以块级元素显示,占满剩余空间
    display:block; //避免生成内容破坏原有布局的高度
    height:0;//使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
    visibility:hidden; //生成内容作为最后一个元素，至于content里面是点还是其他都是可以的
    clear:both; //用来消除float的影响
}

说道这里不得不提清除浮动的集中方法了，浮动是因为脱离了文档流，父元素没设置高度引起的，

一般父元素overflow：hidden,或auto都可以，

用伪类清除浮动，

加元素如图

2  伪类，就是a:hover{} 这种

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

 

还有就是firtst-child,last-child nth-child()等等这种