CSS选择器

一、基本选择器
分为四类：标签选择器、类选择器、ID选择器、和通配选择器。
1、标签选择器（标签名）
p { }
2、类选择器（“.”前缀开头+class属性值）
.classname { }
指定类选择器
p.classname { }
class属性可以表示属于多个类，空格隔开
<p class="cn1 cn2 cn3..."></p>
3、ID选择器（“#”作为前缀）
#IDname{ } 与标签连用优先级高div#box{ }
4、通配选择器（“*”表示所有HTML元素
* { }

可以组合使用 eg：span.transport （表示一个叫属于transport类的span元素）

二、组合选择器
1、包含选择器（通过空格标识符来表示）
div span{ }（div包含span）
2、子选择器（“>”表示)
div>span{ }
3、相邻选择器（“+”来表示）
p+h3{ }（前为兄，后为弟，必须相邻，且样式应用于后面那个元素）
4、兄弟选择器（“~”来表示）
h5~h1{ }（选择h5后所有h1标签）
5、分组选择器（“，”分隔开）
body>h6,h1>span,h4>span{ }

三、属性选择器
1、E[attr]
.nav a[href][title]{ }
2、E[attr=“value”]
.nav a[id="first"]
3、E[attr~=“value”]（属性值词列表中具有value这个词）
4、E[attr^=“value”]（属性值以value开头）
5、E[attr$=“value”]（属性值以value结尾）
6、E[attr*=“value”]（属性值包含value的所有元素）
7、E[attr|=“value”]（属性值以value或value-开头的所有元素）

四、伪类选择器（“：”为前缀）
a.selected:hover{ }
1、动态伪类
1)、锚点伪类（如：link、：visited）
2)、行为伪类（如：hover、：active、：focus)
定义的先后顺序必须是link、visited、hover、active，否则会失效
ps：父selector:hover 子selector

2、结构伪类**（“：”前面的元素写子元素）**
1)、：first-child:选择某元素第一个子元素
2)、：last-child
3)、：nth-child
用法：
：nth-child（length）(参数为具体数字，从1开始计算）
：nth-child（n)（参数是n，从0开始计算）
：nth-child（nlength)（n的倍数）
：nth-child（n+length)（选择大于length后面的元素）
：nth-child（-n+length)（选择小于length前面的元素）
：nth-child（nlength+1)（表示隔几选一）
4)、：nth-last-child
5)、：nth-of-type()（适用于包含许多不同类型的元素）
6)、：nth-last-of-type
7)、：first-of-type和：last-of-type
8)、：only-child（父元素唯一的子元素）和：only-of-type（只有一个子元素是唯一的，使用它选中）
9)、：empty（用来选择没有任何内容的元素）

3、否定伪类
：not()（表示否定选择器，即排除或者过滤掉特定元素，不能在括号里输入伪类选择器

4、状态伪类
CSS3新增加的
1)、：enabled（表示匹配可用元素）
2)、：disabled（匹配不可用元素）
3)、：checked（匹配可用，用于按钮等）

5、目标伪类
E：target（当有URL指向E时起效）
http://blog.csdn.net/u012859748/article/details/52612139

6、:first-line，:first-letter，:before，:after
:first-line 表示选择第一行
:first-letter 表示选择第一个字
:before 表示选择之前的
:after 表示选择之后的

五、权重
1）样式表的优先级：作者>用户>浏览器>HTML默认
用户的!important>作者的!important
2）样式的优先级：
一般：行内>内嵌，内部>外部，且!important（需放声明语句和分号之间）拥有最高优先级
常规选择器优先级：比较权值
标签选择器，伪元素或伪对象（::after等）选择器 +1
类选择器，属性选择器，伪类+10
ID选择器+100
其他为0
计算规则：

• 如果一条规则包含了更高权重的选择器，那么这个规则权重更高
• 如果最高权重的选择器是一类的，那么计算权重和比较