规则结构：
规则结构由两基本部分组成：选择器(selector)和声明块(declaration block)；
声明块由一个或多个声明(declaration)组成；
每个声明是一个属性－值对(property-value)；
每个样式表由一系列的规则组成；
h1 {font-size:14px; color:#ff0;} //这是一条简单的声明
其中：
- h1就是选择器；
- {}大括号里面的是声明块；
- font-size:14px和color:#ff0是两个声明；
- font-size和color是属性；
- 14px和#ff0是值；
CSS选择器分类
元素选择器(标签选择器)，类选择器，ID选择器，属性选择器，多类选择器，群组选择器，伪类选择器，伪元素选择器，后代选择器，子选择器，相邻选择器
元素选择器：
元素选择器的选择器名就是HTML标签，所有浏览器都支持；例：
div {font-size:14px; color:#f00;}这条规则将页面中所有div元素设置字体大小为14px，颜色为红色；
类选择器：
类选择器必须以一个英文点(.)号开头，后根选择器名(自定义的，不能以数字开头)；所有浏览器都支持；例：
.wrapper {width:960px;margin:0 auto;}这条规则将页面中class为wrapper的元素设置宽度为960px并且垂直居中；
同一个页面中，同一个类选择器，可以重复使用多次；
ID选择器：
ID选择器必须以一个英文的井(#)号开头，后根选择器名(自定义的，不能以数字开头)；所有浏览器都支持；例：
#header {height:65px;border-bottom:2px solid #ccc;}这条规则将页面中id为header的元素设置高度为65px，下边框2px／实线／灰色；
理论上ID选择器同一个页面中，同一个ID选择器，只能出现一次；
属性选择器：
属性选择器，可以根据元素的属性或属性值来进行匹配；IE6不支持；
- 简单属性选择器：例：
p[title] {margin:10px 0;} //匹配有title属性的p元素 .wrapper[alt] {border:1px solid #00f;} //匹配有alt属性且class为wrapper的元素 [href][alt] {color:#f00;} //匹配有href和alt属性的元素 - 根据具体属性值选择：例：
a[href="http://www.w3c.org"] {text-decoration:underline;} //匹配href="http://www.w3c.org"的a a[alt="www"][title="w3c"] {text-decoration:underline;} //匹配alt="www"且title="w3c"的a - 子串匹配属性选择器：
- [foo^="bar"]，匹配foo属性值以bar开头的所有元素
- [foo$="bar"]，匹配foo属性值以bar结尾的所有元素
- [foo*="bar"]，匹配foo属性值中包含bar的所有元素
a[title^="w"] {color:#fef;} //匹配title属性的属性值以w开头的所有a a[ttile$="c"] {color:#ffc;} //匹配title属性的属性值以c结尾的所有a a[title*="3"] {color:#cff;} //匹配title属性的属性值包含数字3的所有a
多类选择器：
多类选择器，必须同时匹配2个或以上的类；IE6中只能处理2个类的多类型选择器，其他浏览器可以2个及以上；例：
.btn.btn-blue {color:#00f;} //匹配class为btn和btn-blue的元素
.btn.btn-red {color:#f00;} //匹配class为btn和btn-red的元素
.btn.btn-green{color:#0f0;} //匹配class为btn和btn-green的元素，以上三个IE6也支持
.btn.btn-green.ml10{margin-left:10px;} //匹配class为btn和btn-green和ml10的元素，IE6不支持；记住，一定要同时满足匹配的多个类；.btn.btn-blue之间没有空格有空格就是后代选择器了；
群组选择器：
当几个选择器的声明块一样时，可以共同调用一个声明块，选择器之间用逗号分隔，这就是群组选择器；所有浏览器都支持例：
div,.wrapper,#header,a[alt="www"] {margin:0 10px;}这条规则将匹配页面中所有div元素，class为wrapper的元素，id为header的元素以及alt属性值www的a元素，将他们的margin值统一设置为上下0左右为10px；
伪类选择器：
IE6只支持超链接有href属性的a元素伪类(注：<a></a>与<a href=""></a>是不一样的)，其他浏览器的其他元素也支持伪类
a:link{color:#00f;text-decoration:underline;}
a:visited{color:#00f;text-decoration:underline;}
a:hover{color:#f00;text-decoration:none;}
a:active{color:#f00;text-decoration:none;}a{color:#f00;}与a:link{color:#0f0;}是不一样的；第一个匹配页面所有的a元素，而a:link只会匹配页面中带有href属性的a元素；
静态伪类:first-child用来匹配元素的第一个子元素，这里的第一个子元素很容易被误解，下面举例说明：
div:first-child {border:1px solid #f00;}
//匹配的是做为某个元素的子元素的第一个div元素，而不是匹配的第一个div元素；一定要是做为某个元素的子元素并且第一个子元素是div
<div class="box01"><span>content!</span></div>
<div class="box02"><p>content!!</p></div>
<div class="box03"><div>content!!!</div><div>second div element!</div></div>
这个例子中，匹配的就是.box03里面的第一个div;如果直接这些代码到编辑器里面大家会发现第一行也会有一个边框；这是为什么呢？用firebug看一下就明白了，因为第一个div是做为body元素的第一个子元素的，所以也会有边框伪元素选择器：
div:first-letter {font-size:2em;}
//设置所有div元素的首字母是其他字母的2倍
div:first-line {color:#ccc;}
//设置所有div元素的第一行为灰色
div:before {content:"start";}
//在所有div元素的前面插入字符start
div:after {content:"end";}
//在所有div元素的后面插入字符en后代选择器：
后代选择器又称包含选择器或上下文选择器，后代就是你的儿子，孙子，重孙子都属性于你的后代
；所有浏览器都支持
.wrapper div {font-size:2em;}
//匹配class为wrapper的元素中包含的所有div元素子选择器：
子选择器，就是只匹配儿子，用大于号连接(>)；IE6不支持
.wrapper > .title {font-weight:bold;}
//匹配class为wrapper的元素的儿子的class为title的元素，如果孙子也有class为title的元素是不会匹配的。 相邻选择器：
相邻选择器，就是匹配紧接在一个元素的后的第一个元素，且二者要有同一个父元素，用加号连接(+)，如果两个兄弟元素中间有文字元素是不会受影响的；IE6不支持
<div class="wrapper">
<p class="title">title!</p>
<div>first div element!</div>
<div>second div element!!</div>
</div>
.wrapper .title + div {color:#f00;}
//这条规则只会匹配内容为first div element!的div而不会匹配第二个div选择器优先级
其他的优先级就不做过多说明了，就说说容易混淆的。
css优先级，id加0,1,0,0；类，属性选择器和伪类加0,0,1,0；元素和伪元素选择器加0,0,0,1;内联声明的样式加1,0,0,0
!important;
<div style="color:#333;">!important</div>
div {color:#f00;color:#0f0!important;color:#00f;}
//这条规则除IE6之外的浏览器都是显示 #0f0 ;IE6显示#333;
div {color:#f00;color:#0f0;color:#00f!important;}
//这条规则，所以浏览器都显示00f;
注：
!important的优先级是最高的，比行内的都高；
IE6也识别!important;只是必须要放到所有声明的最后，IE6的!important同样比行内的优先级高；后代选择优先级
后代选择器中如果层级个数一样，不论层级多深多浅，最后解析的时候都是同一级的深度，最终起作用的是选择器在CSS声明中的顺序；如：
<div class="wrapper">
<div class="header">
<p class="title">content!!!</p>
</div>
</div>
.wrapper .title {color:#f00;}
.header {color:#00f;}
.title {color:#0f0;}像上面这样的CSS声明，最终着色是#f00;
.header .title{color:#f00;}
.wrapper .title{color:#ff0;}这样CSS声明，最终着色是ff0
.wrapper .title{color:#ff0;}
.header .title{color:#f00;}这样CSS声明，最终着色是f00;
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
