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 可改变选中文本的样式