CSS学习笔记一：选择器

规则结构：

    规则结构由两基本部分组成：选择器(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;