二、css3选择器
通过选择器的使用，你不再需要在编辑样式时使用多余的以及没有任何语义的class属性，而是直接将元素和样式绑定起来，从而节省大量在网站或web应用程序已经完成之后修改样式时所需花费的时间。
一、选择器的概述
选择器是css3中一个重要的内容，如果在页面中定义多个class属性，并不能将元素和样式绑定起来，使用class的缺点：第一，class属性本身没有语义，它纯粹是为css样式服务的，属于多余的属性；第二，使用class属性的话，没有把元素和样式绑定起来，一个class属性，多个元素可以多处使用，造成修改样式时很不方便。
如：div[id="div_big"]{.......}
二、属性选择器
1、属性选择器概述，在html中，通过各种各样的属性，我们可以给元素增加很多附属信息，例如通过id属性，我们可以将不同的div元素进行区分，并且通过javascript来控制这个div元素的内容和状态。
css2中属性选择器：[att=val]，其中att代表属性，val代表属性值。
css3中新增了三个属性选择器：
- [att*=val]，表示属性的属性值中包含用val指定的字符，则该元素使用该样式。
- [att^=val]，表示属性的属性值如果是以val指定的字符开头的，则该元素使用该样式。
- [att$=val]，表示属性的属性值如果是以val指定的字符结尾的，则该元素使用该样式，如：[id$=\-1]{......}，这里要注意，该属性选择器在指定匹配字符前必须加上“\”。
三、结构性伪类选择器
1、css3中伪类选择器及伪元素
css3中的类选择器可以随意起名，如：p.left、p.right，然后页面上使用“class="left"、class="right"”，但是伪类选择器是css中已经定义好的选择器，不能随便起名。比如在使用在a元素上的几个伪类选择器：a:link、a:visited、a:hover、a:active
2、伪元素选择器
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器。它的使用方法：
选择器：伪元素{属性：值}
伪元素选择器可以和类配合使用：选择器.类名：伪元素{属性：值}
css中主要有以下四种伪元素选择器：
- first-line伪元素选择器：用于向某个元素中的第一行文字使用样式。
- first-letter伪元素选择器：用于向某个元素中的文字的首字母或第一个字使用样式。
- before伪元素选择器：用于在某个元素之前插入一些内容。如：p:before{content:"aaa"}（行级）
- after伪元素选择器：用于在某个元素之后插入一些内容。（行级）
3、结构性伪类选择器
- root选择器：将样式绑定到页面的根元素中，根元素是位于文档树中最顶层结构的元素，在html页面中就是指包含整个页面的“<html>”部分。
- not选择器：如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式。
- empty选择器：用来指定当元素中内容为空白时使用的样式。
- target选择器：对页面中某个target元素（该元素的id被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
- first-child选择器：选择父元素中的第一个元素。
- last-child选择器：选择父元素中的最后一个元素。
- nth-child(n)：表示第n个子元素。
- nth-last-child(n)：表示倒数第n个子元素。
- nth-child(odd)：表示所有正数下来的第奇数个子元素。
- nth-child(even)：表示所有正数下来的第偶数个子元素。
- nth-last-child(odd)：表示所有倒数下来的第奇数个子元素。
- nth-last-child(even)：表示所有倒数下来的第偶数个子元素。
- nth-of-type(odd)：
- nth-of-type(even)
- nth-last-of-type(odd)
- nth-last-of-type(even)
循环使用样式
- nth-child(4n+1)
- nth-child(4n+2)
- nth-child(4n+3)
- nth-child(4n+4)，这里“4n+4”可以缩写成"4n"
- only-child：相当于nth-child(1):nth-last-child(1)
- :hover：用来指定当鼠标移动到元素上时元素所使用的样式
- :active：用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式
- :focus：用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用
- :enabled：用来指定元素处于可用状态时的样式
- :disabled：用来指定当元素处于不可用状态时的样式
- :read-only：用来指定元素处于只读状态时的样式。
- :read-write：用来指定当元素处于非只读状态时的样式
- :checked：用来指定表单中的radio单选框或checkbox复选框处于选中状态时的样式
- :default：用来指定当页面打开时默认处于选取状态的单选框或复选框的样式
- :indeterminate：用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，当选取其中一个单选框时样式取消。
- ::selection：用来指定当元素处于选中状态时的样式，例如当鼠标选中一段文本时，该文本的样式改变。
- :required：用来指定允许使用required属性，并且已经定义了required属性的input元素、select元素、textarea元素的样式。
- :optional：用来指定允许使用required属性，并且已经定义了optional属性的input元素、select元素、textarea元素的样式。
4、通用兄弟元素选择器
用法：<子元素> ~<子元素之后的同级兄弟元素>
例如：div ~p{}
