CSS3之选择器与伪类、伪元素

CSS3现状

CSS3是从CSS2发展过来的，在原有的基础上有了很大的性能提升和功能增加，但CSS3浏览器支持程度差，兼容性不好，有时需要添加私有前缀。CSS3对移动端的支持优于PC端，如今CSS3应用还是相当广泛的。对于CSS3，我们应该坚持渐进增强的原则，也就是保证低版本浏览器能够支持，高版本浏览器能够拥有最好的用户体验。

属性选择器

标志性符号：[]

E[title] ：选中页面的元素E，并且E带有title属性

---

E[title=”abc]：选中title属性值为abc的E元素

---

E[title^=”abc”]：选中title属性值以abc开头的E元素

---

E[title$=”abc”]：选中title属性值以abc结尾的E元素

---

E[title*=”abc”]：选中title属性值包含abc的E元素

伪类选择器

标志性符号： ：

一般伪类

:hover 鼠标放在上面状态
:link 默认状态
:active 点击时状态
:visited 点击过后的状态

结构伪类

通过结构来筛选

E:first-child{} ：选中所有E元素的第一个元素
E:last-child{} ：选中所有E元素的最后一个元素
E:nth-child(n){} ：选中所有E元素的第n个元素，n是具体的值，如不是，则选中所有的元素
E:nth-child(odd/even){} ：选中所有E元素的第奇数/偶数个元素
E:nth-child(2n){} ：选中所有E元素的偶数个元素
E:nth-child(2n+1){} ：选中所有E元素的奇数个元素
E:nth-child(n){} ：选中所有E元素的所有元素
E:nth-child(-n+5){} ：选中所有E元素的前5个元素，5这个值可以改
E:nth-last-child(-n+5){} ：选中所有E元素的后5个元素，5这个值可以改
E:nth-last-child(n){} ：选中所有E元素的从最后倒数第n个元素，n是具体的值，如不是，则选中所有的元素

empty伪类

如果选中元素为空，则会使用，不能有标签和文本，连空格都不行

使用方法：：empty{}

target伪类（目标伪类）

需要配合锚点使用，表示元素被激活的状态

伪元素

标志性符号：::

常见伪元素：

::before
::after

伪元素顾名思义就是一个假的元素，其必须有content属性，而且必须有值，一般为“.”,产生的元素相当于div标签

伪元素选择器

::first-letter 选中第一个字母
::first:line 选中第一行
::selection 可改变选中文本的样式