css选择器记录大全

摘要: 作为一个前端er，css的重要性就不用多说了。然后，学习css选择器对于学习css的重中之重。鉴于使用的时候经常会忘掉曾经使用过的选择器，于是，有必要去做个总结^_^

基础选择器
*,id,class,元素选择器这些年头用到年尾的就不多说了。

**p.wola{}**这样就是选择含有wola类名的p元素

.wola.hahua这个选择器选择同时包含wola和hahua两个类的元素，注这种选择器并没有入ie6的法眼，ie6残忍的拒绝支持。

.wola(空格).hahua这种写法就是选择含有wola类的元素的里边含有hahua类的所有后代元素，包括儿子，孙子，曾孙子等等。
类似的div（空格）hahua就是选择d有hahua类且父亲是div的元素；

div>.hahua这种写法就是div中含有hahua类的直接儿子元素，不包括孙子等后代元素。
然而ie6表示也不支持这种选择器；

E+F 相邻兄弟选择器，E和F两个元素具有一个相同的父元素，而且F元素跟在E元素后面（注意是相邻关系），这样就可以选择到F元素；
然而ie6表示也不支持这种选择器；

E~F 通用兄弟元素选择器，选择E元素后面所有的兄弟元素，前提是拥有同一个父元素。
然而ie6表示也不支持这种选择器；

群组选择器多个选择器具有相同样式的话，每个选择器之间用逗号“,”隔开；

属性选择器

.wola div[id] 选择父元素是含有wola类且含有id属性的元素；
类似的 .wola div[id][href]就是选择父元素含有wola类且同时含有id和href属性的元素；
然而ie6表示也不支持这种选择器；

div[id="mydiv"] 更加具体了，选择id属性值为mydiv的div元素 ；
类似的 div[id="mydiv"][title="adiv"]就是选择id属性值为mydiv且title属性值为adiv的div元素；
然而ie6表示也不支持这种选择器；

div[title~="wola"] 选择含有title属性值含有wola这个词的div元素，title属性值可以有几个词，但是只需有wola这个词就被选择；
然而ie6表示也不支持这种选择器；

div[href^="http://"] 选择href属性值开头是http://的div元素；
然而ie6表示也不支持这种选择器；

img[src$="jpg"] 选择src属性值结尾是jpg的img元素；这种选择器通常用于选择规定格式的元素；
然而ie6表示也不支持这种选择器；

div[title="hua"]* 选择title属性值含有“hua”字符串的div元素；
然而ie6表示也不支持这种选择器；

div[attr|="value"] 选择attr属性值为value或者以value-开头的所有元素；
然而ie6表示也不支持这种选择器；

伪类选择器

同样:link, :visited, :hover, :active这些很熟悉了，就不多说了；不过要注意一点就是要按顺序写，不然可能会BOOM；

:focus 用于元素成为焦点，这个经常用于表单元素上；
:hover在ie6下只有a元素支持； ie6-7不支持 :active和:focus；

:enabled,disabled,:checked，这三个伪类成为UI元素状态伪类，主要用于form元素，最常见的比如type="text"有enable和disabled两种状态；而单选框和复选框有checked和unchecked两种状态；
ie6-8表示不支持这三个伪类选择器；

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child() 这里分两种情况，贴上例子代码

<div id="haha">
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
</div>

#haha div:nth-child(3){
color: red;
}

第三个div就会字体变红色，请注意是第三个而不是第四个，也就是说不是从0算起；

#haha div:nth-child(n){
color: red;
}

所有的子div字体都会变红色；

#haha div:nth-child(2n){
color: red;
}

偶数的子div字体就会变红色；

#haha div:nth-child(2n-1){
color: red;
}

奇数的子div字体就会变红色；

#haha div:nth-child(n+5){
color: red;
}

从第五个子div开始字体变红色

#haha div:nth-child(-n+5){
color: red;
}

前五个子div字体变红色；

#haha div:nth-child(4n+1){
color: red;
}

每隔4个子div元素字体变红色；
**ie6-8和FF3-**浏览器不支持:nth-child选择器；

:nth-last-child()
这个玩法跟:nth-child()一样，只不过算法是从最后算起；

:nth-of-type

#haha div:nth-of-type(even){
color: red;
}

奇数的子div字体颜色变红；类似的even改成odd就是偶数；
**ie6-8和FF3-**浏览器不支持:nth-of-type选择器；

:nth-last-of-type
相比上面那个只是反过来算而已；
**ie6-8和FF3-**浏览器不支持:nth-last-of-type选择器；

:empty
选择没有任何内容的元素，包括空格都没有；
ie6-8不支持:empty选择器；

否定选择器:not

#haha div:not(:first-child){
color: red;
}

除了第一个子div外，其他都字体颜色变成红色

input:not([type="submit"]) {border: 1px solid red;}

除了submit之外，其他input元素的边框都改变；
ie6-8不支持:not()选择器；

::first-line
选择元素的第一行，比如改变每个段落的第一行文本的样式，可以使用这个

p::first-line {font-weight:bold;}

::first-letter
选择文本块的第一个字母；

::before和::after
选择元素的前面或后面插入内容，经常用于清除浮动；

::selection
给鼠标选择的文字添加样式。
IE9+支持，firefox要加上前缀“-moz”，例如：

::selection {
background: 颜色值；
color:颜色值；
}
/*Mozilla Firefox*/
::-moz-selection {
background: 颜色值；
color:颜色值；
}

本文参考出处：W3CPLUS