CSS选择器

CSS选择器的使用是否合理，会直接影响CSS代码的精简程度和执行效率，所有合理驾驭CSS选择器，才能写出高质量的CSS代码。CSS选择器最基本的有五种：

标签选择器、ID选择器、类选择器、通用选择器、伪类选择器。

 

标签选择器（div、p....）：方便，但是不够灵活。用法如下：

body {margin:0; padding:0;}

 

 

ID选择器(#)：ID调用，具有唯一性，不重复，针对性较强。用法如下：

#one { padding:0;}                                      

 

通用选择器(*)：对整个网页中所有HTML标签进行样式定，覆盖的对象更加广泛，是整个HTML的所有标签，功能是强大，但是这样反而限制了它的灵活性，主要应用于标签重置。用法如下：

*{margin:0; padding:0;}

 

类选择器(.)：和ID选择器的用法类似，只不过把id换做class。用法如下：

.one {padding:0;}

 

伪类选择器(:link 、:visited  、:hover 、:active )：主要是对A标签定义。IE6除外，对其他浏览器其他标签也可以使用。用法如下：

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

 

补充：一个标签可以有多个类选择器的值，不同的值用空格分开，如：

<div class="one yellow left">一个标签可以有多个类选择器的值</div>

这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用

<div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>

 

选择器的集体声明

标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

h1,h2,h3,h4,h5,h6{color:#900;}

#header,div,.blue,h1{font-size:14px;}

 

选择器的嵌套

选择器也是可以嵌套的，用空格分开，如：

 

#div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

#div1 .thep a {color:#900;}/*意思是ID为div1内的.thep类下的a标签的文字颜色为红色*/

div p a {color:#900;}/*意思是div内的p下内的a标签的文字颜色为红色*/

 

p .content {color:#900;}/*是选择器的嵌套，用来指定页面内P标签且内部类选择器为content的标签内的文字颜色为红色*/

p.content {color:#900;}/*是指定选择符，用来指定页面内某个类选择器为content的P标签内的文字颜色为红色*/（特殊用法：指定选择符）