CSS记录-1-ID和类选择符

Question one:什么时候用ID什么时候用类?
1. 什么时候使用ID
ID 的用途是在页面中唯一地标识一个元素。正因为如此，同一个页面中的每一个ID属性，都必须有独一无二的值（名字）。好吧，换一个角度讲，每个ID 名在页面中都只能用一次。

<nav id="mainmenu">

也可以使用ID 把JavaScript 与某个标签关联起来（比如，当用户鼠标移动到一个链接上面时，运行激活动画的脚本）。ID 值的唯一性对JavaScript 尤其重要，否则就会导致JavaScript 行为异常。
在这里，页面中就不能再有其他元素使用mainmenu 作为ID 名了。为了标识页面的某一部分，比如主导航菜单，可以为nav（navigation，导航）添加一个ID 属性，并让它包含菜单元素。

<nav id="mainmenu">
<ul>
<li><a href="#">Yin</a></li>
<li><a href="#">Yang</a></li>
</ul>
</nav>

#mainmenu a {color:orange;}

利用唯一ID，可以在CSS 中方便地定位到这个元素，以及它的子元素。到了后面读者会发现，我经常会给页面中每个顶级区域都添加一个ID，从而得到非常明确的上下文，以便编写CSS 时只选择嵌套在相应区域内的标签。差不多了吧，你已经理解了ID 表示的是页面中一个唯一的HTML 元素，下面就来聊一聊什么时候使用类吧。

**2. 什么时候使用类**

类的目的是为了标识一组具有相同特征的元素，比如本章前面例子中的那个specialtext 类。在下面这个孩子名字的列表中，我想把男孩的名字变成蓝色，把女孩的名字变成粉红色。首先，我用类在标记中标识出了性别。

<nav>
<ul>
<li class="boy"><a href="#">Alan</a></li>
<li class="boy"><a href="#">Andrew</a></li>
<li class="girl"><a href="#">Angela</a></li>
<li class="boy"><a href="#">Angus</a></li>
<li class="girl"><a href="#">Anne</a></li>
<li class="girl"><a href="#">Annette</a></li>
</ul>
</nav>

然后，再用CSS 为链接应用颜色：
.boy a {color:#6CF;}/蓝色/
.girl a {color:#F9C;}/粉红色/
第一条规则选择所有类名为boy 的祖先元素包含的a 元素，第二条规则选择所有类名为girl 的祖先元素包含的a 元素。这两种情况下的祖先元素，都是作为相应链接父元素的li 元素。
不要乱用类
要避免Web 开发专家Jeffrey Zeldman 说的“类泛滥——标记中的麻疹”出现。什么意思呢就是说你不要像使用ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能像大多数对CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的CSS 量。

Question two：层叠规则计算特指度
下面我们具体讲一讲怎么计算选择符的特指度。首先，有一个简单的记分规则，即对每个选择符都要按下面的“ICE”公式计算三个值：
I - C - E
ICE 并非真正的三位数，只不过大多情况下把结果看成一个三位数没有问题，三位数最大的胜出。但是，千万得知道0-1-12 与0-2-0 相比，仍然是0-2-0 的特指度更高。三个字母间的短横线是分隔符，并非减号。针对这个公式的计分办法如下：

1. 选择符中有一个ID，就在I 的位置上加1；
2. 选择符中有一个类，就在C 的位置上加1；
3. 选择符中有一个元素（标签）名，就在E 的位置上加1；
4. 得到一个三位数。
   好了，下面通过几个例子来理解特指度。
   P 0-0-1 特指度=1
   p.largetext 0-1-1 特指度=11
   p#largetext 1-0-1 特指度=101
   body p#largetext 1-0-2 特指度=102
   body p#largetext ul.mylist 1-1-3 特指度=113
   body p#largetext ul.mylist li 1-1-4 特指度=114
   在此，每个选择符都比前一个选择符的特指度更高。

查理版简单层叠要点
在这个查理版里，只要记住三条规则就够了。这三条规则适合所有情况。
规则一：包含ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会胜出。
规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。下面简单解释一下规则三。比如下面的标记

<div id="cascade_demo">
<p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>

和下面的规则

div#cascade_demo p#inheritance_fact {color:blue;}

2 - 0 - 2 （高特指度）
会导致单词“weak”变成蓝色，因为它从父元素p 那里继承了这个颜色值。但是，只要我们再给em 添加一条规则
em {color:red;}
0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但em 继承的颜色值，会被为它明确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也没有用。