CSS3复习之常见的伪类和伪元素选择器

前端开发的过程,避免不了会写CSS,这个时候合适的使用伪类和伪元素选择器可以使得我们的代码更简洁易懂,本文主要记载常用的伪类和伪元素选择器和其用法:

• 一、伪类选择器

1.a:active--- 激活链接的时候触发
2.input:checked----勾选的<input/>元素(type = "radio"或者type = "checkbox") 
3.input:disabled----禁用的<input/>元素
4.p:empty----没有子元素的<p></p>
5.input:enabled----启用的<input/>
6.p:first-child----作用于父元素的第一个 子元素是<p></p>
7.input:focus----作用于具有焦点的<input/>
8.a:hover----鼠标停在<a></a>上时
9.p:last-child----作用于父元素的最后一个标签是<p></p>
10:not(p)----作用于不是<p></p>的全部元素
11.p:nth-child(2)----作用于其父元素的第二个元素是<p></p>
12.p:nth-last-child(2)---作用于其父元素倒数第二元素是<p></p>

• 二、伪元素选择器

1.	p::after----作用于每个<p></p>后面插入的内容
2.	p::before----作用于每个<p></p>前面插入的内容
3.	p::selection----作用于鼠标选中的内容

总结

1.伪类是一个冒号----":"
2.伪元素是两个冒号----"::"
3.伪元素在不同的浏览器中会存在兼容性问题,解决方案----CSS hack(具体问题使用谷歌或者百度解决)