CSS3选择器_html/css_WEB-ITnose

基本选择器

1、通配符选择器（*）—所有浏览器支持

*{    marigin: 0;    padding: 0; }

2、元素选择器(E) —所有浏览器支持
3、类选择器（.className） —所有浏览器支持
4、id选择器（#ID）—所有浏览器支持
5、后代选择器（Ｅ Ｆ）—所有浏览器支持

选择了Ｅ元素的所有后代Ｆ元素，中间是一个空格；

6、子元素选择器(E>F) —IE6不支持

选择了Ｅ元素下的所有子元素Ｆ
7、相邻兄弟元素选择器(E + F) —IE6不支持

EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻；
8、通用兄弟选择器（Ｅ 〜 Ｆ） —IE6不支持

选择某元素后面的所有兄弟元素

9、群组选择器（selector1,selector2,...,selectorN）—所有浏览器支持

每个选择器之间使用逗号“，”隔开

属性选择器 IE6不支持

E[attr]：只使用属性名，但没有确定任何属性值；
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；

E[attr="value"]与E[attr~="value"]的区别：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。

E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

伪类选择器

1、动态伪类 对于:hover在IE6下只有a元素支持，:active只有IE6-7不支持，:focus在IE6-7下不被支持。

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

注意先后顺序：爱恨原则LoVe/HAte,也就是Link--visited--hover--active；

还有一个 :focus 用于元素成为焦点，这个经常用在表单元素上。

2、UI元素状态伪类 IE6-8不支持

":enabled",":disabled",":checked" 主要是针对于HTML中的Form元素操作

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

3、CSS3的:nth选择器

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child(n)选择某个元素的一个或多个特定的子元素； IE6-8和FF3-浏览器不支持":nth-child"选择器。

括号里的n可以是整数，表达式，关键词；

整数：从1开始；如 :nth-child(3),选择某元素下的第三个子元素；

表达式：如2n+1，n是从0开始； 这里的n只能是n，不能改成其他字母代替；

关键词：odd，even；

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；

:nth-of-type类似于:nth-child；唯一不同的是这种指定了元素的类型而以；

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；

":only-child"表示的是一个元素是它的父元素的唯一一个子元素
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格；

3、否定选择器（:not） IE6-8浏览器不支持

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

4、伪元素

两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式；

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉；

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动；

::selection 用来改变浏览网页选中文的默认效果；

/*Webkit,Opera9.5+,Ie9+*/   ::selection {	background: 颜色值；	color:颜色值；   }   /*Mozilla Firefox*/   ::-moz-selection {	background: 颜色值；	color:颜色值；    }

“::selection”只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。

参考：http://www.w3cplus.com/css3/basic-selectors