css选择器

除了常用的通用选择器（*），ID选择器，class选择器，标签选择器之外，以下主要总结一下自己不常用但是却很重要的一些选择器：

注意：多类选择器，就是类似于.A.B,.C#D......这样的选择器，选择的是所有既包含类名A又包含类名B的元素，同理其他的就好解释了，

属性选择器中可以可以连着来比如.a[attr][attr1],表示选择所有类名为a而且也包含属性attr又包含属性attr1的元素

伪类选择器：

：visited  当链接被访问过后的时设置的样式（多用于链接）；

：hover 当鼠标悬浮在元素上的时候定义的样式（一般任何元素均可）；

：link  链接处于平常状态的样式（多用于链接）；

：active 当链接访问的那一瞬间定义的样式；

：focus 当鼠标聚焦的时候定义的样式（一般用在 input元素上）；

：before 在元素内部最前面插入生成的内容；

：after 在元素内部最后插入生成的内容；

注意：这些伪类可以混合叠加使用哦！

高级的选择器：

D>E（子选择器）	选择D元素下面所有的直接子元素E
D+E（紧兄弟选择器）	选择在D元素之后并且紧挨着D元素的兄弟元素E
div[attribute]（属性）	选择带有属性attribute的所有的div元素
div[attr = val](属性值)	选择含有属性attr 并且属性值为val的所有的div元素
D~E（兄弟选择器）	选择位于D元素之后所有的E元素（兄弟元素）
D[attr~=val]	选择所有attr属性有多个值，其中一个值为val的所有D的元素
D[attr|= val]	选择attr属性值有多个连字符号分割，其中一个以val开头的D元素

注：1.css为啥叫层叠样式表，可能就是因为不同的选择器之间有层级和权重的分别吧！

2.恰当的使用继承可以简化css结构，减少代码的冗余度。

CSS3新增的选择器：

新增属性选择器：

 D[attr ^= "val"]     匹配所有含有属性attr，而且属性值以val开头的D元素；

 D[attr $= "val"]     匹配所有含有属性attr，而且属性值以val结尾的D元素；

 D[attr ^= "val"]     匹配所有含有属性attr，而且属性值包含val字符串的D元素；

表单相关：

D:enabled  匹配表单中激活的元素；

D:disabled  匹配表单中禁用的元素；

D:checked  匹配表单中被选中的单选框或者复选框的元素；

D::selection  匹配表单中被选中的元素；

反选选择器：

D:not(s) 匹配所有不符合当前选择器的元素；

例如：p:not([class]){color:red;} // 没有class属性的p元素都设置为红色；

特殊：

D：target 一般用于锚链接，其效果是这样的：

当浏览器地址里的hash(地址里#号后面的部分)和:target 伪选择器指定的ID匹配上时，它的样式就会在这个ID元素上生效。

例如：

<h2 id="section2">Section 2</h2>
<h2 id="section1">Section 1</h2>
:target {
	color: #000;
}
/* applies to H2's */
h2:target {
	color: #f00;
}

当hash值为h2元素所对应的id值的时候触发对应的样式；

结构伪类选择器：