选择器

常用的选择器

• 元素（标签／简单）选择器--p，h1等、
• ID选择器--#id名、
• 类选择器--.类名、
• 后代选择器（可以将类或者ID应用于它们的祖先，然后使用后代选择器来定位，选择所有后代）--空格连接。

伪类：根据文档之外的其他条件为文档应用样式，如表单元素或链接的状态。

• ：link和：visited称为链接伪类，只能用于锚元素；
• ：hover,:active,:foucs称为动态伪类，理论上适用于任何元素。ie6忽略：foucs,Ie7在任何元素上都支持：hover,忽略:active,:foucs。
• 值得指出的是，通过把伪类链接在一起，可以创建更复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

  /*makes all visited links olive on hover*/
  a:visited:hover { color: olive; }

通用选择器：*

最强大但最少用，在与其他选择器结合使用时，通用选择器可以用来对某个元素的所有后代应用样式，或者跳过一级后代。

高级选择器

1、子选择器（>）

后代选择器选择一个元素的所有后代，子选择器只选择元素的直接后代，即子元素，如下，外层列表中的列表项会显示图标，但是嵌套列表中的列表项不受影响。

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Service</a>
        <ul>
            <li><a href="#">Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul><style>
    #nav > li {           
        background: url(folder.png) no-repeat left top;
        padding-left: 20px;
    }
</style>

IE7和更高版本都支持子选择器。但是IE7中有一个小bug，如果父元素和子元素之间有HTM注释，就会出问题。在IE6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应用你希望子元素具有的样式，然后，使用通用选择器覆盖子元素的后代上的样式。上面的效果也可用下面的代码实现：

    #nav li {        /*现在所有后代上应用希望子元素的样式*/
        background: url(folder.png) no-repeat left top;
        padding-left: 20px;
    }
    
    #nav li * {       /*覆盖子元素的后代上的样式*/
        background-image: none;
        padding-left: 0;
    }

2、相邻同胞选择器（+）

可选择紧接在某一元素后的元素，且二者有相同父元素。与子选择器一样，如果在目标元素之间有注释，这在IE7中也会出现问题。

如下：接在h2后面的第一个p的会被应用样式

<h2>Peru Celebrates Guinea Pig festival</h2>
<p>The guinea pig festival in Peru </p>
<p>Guinea pigs can be fried</p>
<style>
h2 + p {
    font-size: 1em;
  font-weight: bold;
    color: #777;
}
</style>

3、属性选择器（[]）

属性选择器可以根据某个属性是否存在或属性的值来寻找元素，因此能够实现某些非常有意思和强大的效果。

/*根据某个属性是否存在应用样式*/
acronym[title]{
/*对具有title的acronym应用样式*/
}

/*根据属性值应用样式*/
a[rel="nofollow"]{
/*对rel值为nofollow的a应用样式*/
}

/*根据属性值之一寻找元素*/
a[rel~="co-worker"] {
/*对rel值有一个为co-worker的a应用样式*/
}

4、层叠和特殊性

同一个元素可能有两个或者更多规则，CSS通过一个称为层叠的过程处理这样的冲突。

CSS层叠的重要度次序如下：

1. 标有！important的用户样式（浏览网页的用户自己设置的样式）
2. 标有！important的作者样式（作者样式是有站点开发者编写）
3. 作者样式
4. 用户样式
5. 浏览器／用户代理应用的样式（浏览器自己定义的默认样式）

具有更加特殊性选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。（可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上的!important标志的规则。）

特殊性

为计算规则的特殊性，每种选择器都有一个数字值，将规则的每个选择器的值加在一起，就可以计算出规则的特殊性。

4个等级的定义如下：

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为10。
4. 第四等：代表类型选择器和伪元素选择器，如div，权值为1。

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

可通过在主体标签上添加类或ID来应用特殊性

继承

元素后代继承父元素的某些属性。

如果在主体设置字号，页面上的任何标题都没有采用此样式。不是因为标题没有继承文本字号，而是浏览器的默认样式表设置了标题字号。继承而来的样式特殊性为空，所以直接应用于元素的任何样式总会覆盖继承而来的样式。

 CSS 权重优先级顺序简单表示为：

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

属性继承

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height