标签：class sele ... 分类选择 enable 表示 标签 定义 val
首先，我们要知道选择器的作用，选择器就是匹配页面中的元素，规范页面中哪些元素可以使用规定好的样式。。
一、基础选择器
1、通用选择器
作用：匹配页面中所有的元素
语法：*
例子:
*{
color:red;
}
body{
color:red;
}
2、元素选择器
别名：标签选择器，标记选择器，标签样式，标记样式，元素样式
作用：定义页面中某个指定标记的默认样式。比如：div，p ...
语法：由元素名称作为选择器
例子： p{} div{} span{}
3、类选择器
作用：通过元素所附带的 class 属性值，对类选择器进行引用
语法：.类选择器名称{}
注意：名称不能以数字开头，不能包含特殊字符,“-”与“_”除外 可以将多个类选择器应用在同一个元素中-多类选择器
class 属性值 是以 空格 来分开的值列表。<p class="类名1 类名2"></p>
例子： .title{
color:red;
}
可以将类选择器和元素选择器结合使用,目的是为了对某种元素中不同样式的细分控制-分类选择器
语法：元素选择器.类选择器{}
4、ID选择器
作用：通过元素所附带的 id 属性值，对样式进行声明定义。
语法：#ID值
注意：不能以数字开头
例子： #id1{
color:red;
}
也可以在元素选择器后面跟着写id选择器 ：元素选择器#ID选择器{}
5、群组选择器
作用：为了定义一组选择器的公共样式
语法：以 英文 , 隔开的选择器列表
例子： sel1,sel2,sel3 ... {}
p,.redBack,.important,#header{
font-size:24px;
}
6、后代选择器
多于一级以及一级的层级关系：后代 子代也可以称之为后代
语法：selector1 selector2{}
在 满足 selector1 选择器的元素内，再去匹配 满足 selector2的选择器的元素
7、子代选择器
只有一级层级关系：子代
语法：selector1>selector2{}
注意： > : 表示的是子代关系
目的：缩小匹配范围
8、伪类选择器
作用：匹配元素不同的状态
语法：:伪类选择器{} 选择器:伪类选择器{}
分类：
1、链接伪类
目的：匹配超链接元素
:link,适用于尚未访问的超链接样式
:visited,适用于访问过的超链接的样式
2、动态伪类
:hover,适用于，鼠标悬停在元素上时的状态
:active,适用于，元素被激活(点击)时的状态
:focus,适用于，元素获取焦点时的样式。多数用在<input type="text">或<input type="password">
备注：（1）还有目标伪类，元素状态伪类等放在下面的复杂选择器中介绍
（2）选择器优先级-权值（在写样式的时候，选择器的优先级显得尤为重要，一个样式是否被其他样式覆盖，全靠选择器了（当然，用js控制的样式除外））
元素选择器 1
类选择器 10
伪类选择器 10
ID选择器 100
内联样式 1000
选择器的权值加到一起，大的优先。 如果权值相同，以后定义为主。
二、复杂选择器
1、兄弟选择器
兄弟：具备相同父元素的 一组元素称之为 兄弟元素
（1）相邻兄弟选择器
作用：匹配指定元素的相邻相邻兄弟 相邻：下一个
语法： 结合符 : + 选择器1+选择器2
例子 : p+div{} #content+.important{}
（2）通用兄弟选择器
作用：匹配 指定元素 下面所有的 满足选择器的元素
语法： 结合符：~ 选择器1~选择器2
2、属性选择器
作用：允许 通过 元素所附带的属性及其值，来匹配页面上的元素
语法：[]
（1）：[attr]
作用： 匹配 元素中 附带 attr 属性的元素
例子： [title] : 匹配所有 附带 title 属性的元素
[class] : 匹配所有 附带 class 属性的元素
[id] : 匹配所有 附带 id 属性的元素
（2）elem[attr]
作用：匹配 具备 attr 属性的 elem 元素
例子: div[title]
（3）elem[attr1][attr2]
作用：匹配 同时具备 attr1属性以及attr2属性的 elem 元素
（4）elem[attr=value]
作用：匹配 attr 属性的值 为 value 的 elem 元素
例子: [class=c1] : 匹配class属性值为c1的元素
div[title=‘xxx‘] : 匹配 title属性值为xxx的div元素
p[id="p1"][class=important]:匹配 id值为p1并且class属性值为important的p元素
（5）elem[attr~=value]
作用：匹配 attr 属性值 为值列表，并且 value 是该列表中的一个值的 elem 元素
例子： <p class="p1 important rt"></p>
p[class~=important]
匹配 class 属性值 为值列表，并且 important 是该列表中的一个值的 p 元素
（6）elem[attr^=value]
作用：匹配 attr 属性值 是以 value 作为开始的 elem 元素（ ^ : 开始）
例子： p[class^=c]
（7）elem[attr$=value]
作用：匹配 attr属性值是以 value 作为结束的 elem 元素（ $ : 结束）
例子： [class$=t]
（8）elem[attr*=value]
作用：匹配 attr 属性值中 包含 value字符的 elem 元素
3 新伪类选择器：
（1）目标伪类
作用：突出显示活动的HTML锚元素。
语法：:target
（2）元素状态伪类
元素状态：启用的，禁用的，被选中的
使用场合：表单元素中使用
语法
1、:enabled 匹配每个已启用的元素
2、:disabled 匹配每个被禁用的元素
3、:checked 匹配每个被选中的元素
（3）结构伪类
1、:first-child 匹配属于其父元素中的首个子元素
2、:last-child 匹配属于其父元素中的最后一个子元素
3、:empty 匹配没有子元素的每个元素（注意，空格也算是有子元素）
<div>
<p></p>
</div> --有子元素
<div>
Hello World
</div> --有子元素
<div>
</div> --有子元素
<div></div> --无子元素
4、:only-child 匹配属于其父元素中的唯一子元素
5、:nth-child(n) 获取属于其父元素中的第n个子元素
（4）否定伪类
作用：在获取到的元素中，进行进一步的筛选和排除。
语法：:not(选择器)
选择器:not(选择器)
4、伪元素选择器
伪类：匹配元素(不同的状态)
伪元素：匹配 元素中的内容的一部分
（1）:first-letter 或 ::first-letter
first:第一个 letter:字符
作用：获取 匹配元素的 首字符
（2）:first-line 或 ::first-line
作用：获取匹配元素的首行文本
（3）::selection
作用：匹配用户选取的部分
备注 : 和 :: 的区别:
在CSS2.0中 ，伪元素和伪类选择器统一使用 : 来表示。
从CSS3开始，W3C规范，所有的伪类选择器，一律使用 : 表示，所有的伪元素选择器，一律使用 ::表示
为了实现兼容性，尽可能的使用 : 来表示 伪元素，::selection 除外。
标签：class sele ... 分类选择 enable 表示 标签 定义 val
原文地址：http://www.cnblogs.com/missshuanger/p/7724941.html
