CSS选择器

来源：互联网发布：易语言数据采集编辑：程序博客网时间：2024/05/28 23:22

CSS选择器共有三种：标签选择器、ID选择器、类选择器。

【标签选择器】

p{font-size:12px;background:#900;color:090;}

【ID选择器】

ID选择器在某一个HTML页面中只能使用一次（当然也可以用好几次，不过就不符合W3C标准了，页面也就不是标准页面了，所以不要在同一个html页面中多个标签拥有共同的ID）。

<p id="one"></p>#one{font-size:12px;background:#900;color:090;}

【类选择器】

使页面中的某些标签（可以是不同的标签）具有相同的样式。

<p class="one"></p><div class="one"></div>.one{font-size:12px;background:#900;color:090;}

补充：一个标签可以有多个类选择器的值，不同的值用空格分开，如：<div class="ont yellow leftStyle"></div>。id和class也可以一块用<div id="div1" class="one yellow leftStyle"></div>。

【通用选择器】

前三种基本的选择器说完了，再介绍一个CSS选择器中功能最强大但用的最少的一种选择器“通用选择器”。通用选择器对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义。这样可以大大精简代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">#div1 *{background:#eee;color:#333;}#div2{background:#eee;color:#333;}</style></head><body><div id="div1"> <p>p标签区域</p> <div>a标签区域</div></div><div id="div2"><p>p标签区域</p> <div>a标签区域</div></div></body></html>

通用选择器还有一个不得不提的用法，就是为了保证页面能够兼容多种浏览器，所以要对HTML内的所有标签进行重置，将如下代码加到CSS文件的最顶端。
*{margin:0;padding:0}
因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么就需要对HTML标签重置。就是上面的代码。这样写也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对89个标签都加上了{margin:0;padding:0}，因此不建议这么做。89个标签中需要重置的标签是很少的，没必要将所有的标签都重置，选择性的重置需要重置的标签，如下：

body,div,p,a,ul,li{margin:0;padding:0}

【选择器的集体声明】

当某些标签有共同的样式属性时，可以将这些标签集体声明，不同的标签用“，”分开。

h1,h2,h3,h4,h5,h6{color:#900;}
#one,#three,.yellow{font-size:14px;}

集体声明的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块。

【选择器的嵌套】

#div1 p a{color:#900;}/*在ID为div1内的p标签内的链接a标签的文字颜色为红色*/
好处是不需要再单独为ID为div1的标签内的p标签内的a标签单独定义class选择器或ID选择器，这也是CSS代码优化的一块。