CSS中的选择器

1、通配符选择器(*)：通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素。所有浏览器都支持通配符选择器。

*{margin: 0; padding: 0;}

.dome *{padding: 2px;}

 

2、元素选择器(Ele)：元素选择器是css选择器中最常见而且最基本的选择器，元素选择器其实就是文档的元素，如html、body、div等。所有浏览器都支持元素选择器。

li{color:#ddd;}

3、类选择器(.className)：类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要保证在html标记中存在。所有浏览器都支持类选择器，但多类选择器不被IE6所支持。

/*类选择器*/
.className{margin:10px;}

/*多类选择器*/
.one.two{margin:10px;}

4、ID选择器(#idName)：在使用ID选择器在之前需要先在html文档中加注ID名称。所有浏览器都支持ID选择器。

#IDname{margin:10px;}

 

5、后代选择器：后代选择器所起作用的是可以选择某元素的后代元素。所有浏览器都支持后代选择器。

/*后代选择器(ID为one的元素的所有后代span元素中才有效)*/
#one span{margin:10px} 

 

6、子元素选择器：子元素选择器用于选择某个元素的子元素。IE6不支持子元素选择器。

/*子元素选择器(ID为one的元素的子元素的类为two的元素中才有效)*/
#one > .two{margin:10px;} 

7、相邻兄弟元素选择器：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素。IE6不支持这个选择器。

/*相邻兄弟元素选择器(.two后面相邻的span元素才有效，注意.two和span使兄弟关系)*/
.two + span{margin:10px;}

8、通用兄弟选择器：这是CSS3新增的一种选择器，这种选择器将选择某元素后面的所有兄弟元素。IE6不支持这个选择器。

/*通用兄弟选择器.two后面的所有span元素，注意.two和span使兄弟关系)*/
.two~span{margin:10px;}

 

9、群组选择器：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号隔开。所有浏览器都支持群组选择器。

/*群组选择器(ID为one和two的元素才有效)*/
#one, #two{margin:10px;}

 

10、属性选择器：属性选择器的主要作用就是对带有指定属性的HTML元素设置样式。

属性选择器有多种用法：

(1) Ele[attr]：只使用属性名，但没有确定任何属性值。IE6不支持这种选择器。

/*所有带有id属性的a标签都有效*/
 a[id]{margin:10px;}

/*所有带有id属性和title属性的a标签都有效*/
div[id][title]{margin:10px;}

(2) Ele[attr="value"]：指定属性名，并指定了该属性的属性值。IE6浏览器不支持这种选择器。

/*ID名为one的div元素有效*/
div[id=’one’]{margin:10px;}

 

(3) Ele[attr~="value"]：该属性选择器的属性值是一个或多个词列表，是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素。IE6浏览器不支持这种选择器。

/*<div title=”my name is csh”></div>*/
/*能作用于上面的div元素*/ 
div[title~=”csh”]{margin:10px;}

(4) Ele[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的。IE6浏览器不支持这种选择器。

/*<a href=”http://baidu.com”></a>*/ 
/*能作用于上面的a元素*/
a[href^=”http://”]{margin:10px;}

(5) Ele[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的。IE6不支持这种选择器。

/*<a href=”http://baidu.com/my.jpg”></a>*/ 
/*能作用于上面的a元素*/
a[href$=”jpg”]{margin:10px;}

(6) Ele[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value。IE6不支持这种选择器。

/*<div title=”mynamecsh”></div>*/ 
/*能作用于上面的div元素*/
div[title=”name”]{margin:10px;}

11、伪类选择器：CSS的伪类语法和别的语法有点不一样

/*E可以是html标签、标签的ID名和class*/
/*pseudo-class是伪类的名称*/
/*property是CSS的属性*/
/*value是CSS的属性值*/
E:pseudo-class{property:value}

a:link{margin: 10px;}

 

(1) 动态伪类：这些伪类只有当用户和网站互交的时候才能体现出来。这些伪类有：

:link(链接没有被访问过的样式)

:visited(链接被访问过之后的样式)

:hover(鼠标移动到链接上的样式)

:active(鼠标点中激活链接那一下产生的样式)

:focus(元素得到焦点时产生的样式)

对于前四个锚点伪类的设置，有一点需要特别注意，那就是他们的先后顺序，也就是link-visited-hover-active。如果把顺序搞错了会给你带来意想不到的错误。

对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

 

(2) :first-child，这个选择器是用来选择某个元素集中的第一个元素。IE6不支持这个选择器。

/*这个样式作用于第一个li元素*/
li:first-child{margin:10px;}

 

(3) :last-child，这个选择器是用来选择某个元素集中的最后一个元素。IE6不支持这个选择器。

/*这个样式作用于最后一个li元素*/
li:last-child{margin:10px;}

 

CSS选择器的优化：首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素上(浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取，也就是说浏览器读取选择器的顺序是由右到左进行。

/*浏览器首先会尝试在你的HTML元素中寻找所有a[title]元素，接着在匹配.nav和div。)*/
div .nav a[title]{margin:10px;}

选择器有一个固有的效率：

①id选择器(#id)。

②类选择器(.nav)。

③标签选择器(div,span)。

④相邻选择器(h1+p)。

⑤子选择器(ul > li)。

⑥后代选择器(li a)。

⑦通配符选择器(*)。

⑧属性选择器(a[title=’my’])。

⑨伪类选择器(a:hover)。

这九种选择器的效率从①-⑨，其中ID选择器的效率是最高的，伪类选择器的效率则是最低的。

 

选择器的优先级：选择器的优先级分为3个等级a=100、b=10、c=1

一个ID选择器（#one）就等于一个a=100

一个类(class)或伪类(a:link)或属性选择器(div[title])就等于一个b=10

一个元素选择器(div、p)或伪元素选择器(a)等于一个c=1。

在选择器中等级的和越高，那么这个选择器的优先级就越高。

<div id="one">
    <div class="two">
        <p>谁的等级会最高？</p>
    </div>
</div>

#one{...} /*选择器的级别是100*/
#one .two{...}/*选择器的级别是110*/
#one .two p{...}/*选择器的级别是111*/