一.ID属性
1.简述：
ID 与类的写法相似，而且表示 ID 选择符的#（井号）的用法，也跟表示类选择符的.（句号）类似。
如果有一个段落像下面这样设定了 ID 属性
<p id="specialtext">This is the special text.</p>
那么，相应的 ID 选择符就是这样的：
#specialtext {CSS 样式声明}
或者这样的：
p#specialtext {CSS 样式声明}
除此之外，ID 与类的用法都一样，而且我们前面讨论的关于类选择符的（几乎）一切，都适应于 ID 选择符。那两者到底有什么区别呢？
2.【用于页内导航的ID】
ID 也可以用在页内导航链接中。下面就是一个链接，其目标是同一页的另一个位置。
<a href="#bio">Biography</a>
看到 href 属性值开头的#了吗？它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有#，浏览器就会尝试加载bio 目录下的默认页面了）。
使用与 CSS 选择符里相同的 #ID 名语法，可以把链接导航到同一页面中的目标 ID。在这个页面的下方，应该有对应的目标元素。
<h3 id="bio">Biography</h3>
<p>I was born when I was very young…</p>
同样要注意，作为目标的 ID 值前面是没有#的，就是一个普通的 ID 值。
用户单击前面的链接时，页面会向下滚动到 ID 值为 bio 的h3 元素的位置。如果链接的 href 属性里只有一个#，那么点击该链接会返回页面顶部。
<a href="#">Back to Top</a>
换句话说，要写一个“返回顶部”链接，根本不需要 ID 为#的目标元素。
另外，如果你暂时不知道某个 href 应该放什么 URL，也可以用#作为占位符，但不能把该属性留空。因为href 属性值为空的链接的行为跟正常链接不一样。这样，团队中的其他人将来可以用中间层（比如 PHP）变量替换#，以便动态接收来自数据库的 URL。
二.什么时候用ID，什么时候用类
乍一看，类和 ID 都是用于在标记中标识特定标签的 HTML 属性，似乎完全是可以相互取代嘛。然而，它们的用途实际上大不相同。
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>
有了用唯一 ID 标识的菜单之后，就可以使用上下文选择符来选择其中包含的各种类型的标签了。比如，可以将这个菜单中的链接设置为橙色，同时又不会影响页面中的其他链接：
#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 元素。
3.不要乱用类
不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能像大多数对 CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的 CSS 量。
三.ID和类的小结
ID 的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写 CSS 规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。
相对来说，类是可以应用给任意多个页面中的任意多个 HTML 元素的公共标识符，以便我们为这些元素应用相同的 CSS 样式。而且，使用类也让为不同标签名的元素应用相同的样式成为可能。
四.属性选择符
到目前为止，我们已经学习了使用上下文选择符、ID 和类选择 HTML 元素。再有一种选择元素的方法是属性选择符，它基于 HTML 标签的属性选择元素。以下是两个常见的例子。
◆ 属性名选择符
标签名[属性名]
选择任何带有属性名的标签名。
比如，下面的 CSS
img[title] {border:2px solid blue;}
会导致像下面这个带有 title 属性的 HTML img 元素显示 2 像素宽的蓝色边框，至于 title 属性有什么值，无关紧要，只要有这个属性在就行啦。
<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
什么情况下会用到这个属性选择符呢？比如，可以在用户鼠标移动到这些图片上时，此时浏览器会显示一个（利用 title 属性中的文本生成的）提示条。一般来说，人们经常给 alt 和 title 属性设定相同的值。alt 属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。
◆ 属性值选择符
标签名[属性名="属性值"]
在 HTML5 中，属性值的引号可加可不加，在此为了清楚起见，我们加了。
选择任何带有值为属性值的属性名的标签名。
这个选择符可以让你控制到属性的值是什么。例如，这条规则
img[title="red flower"] {border:4px solid green;}
◆ 属性选择符的小结
基于属性名和属性的其他特征选择元素，为我们提供了另一种区别对待相同标签的机会。只要事先规划好，就可以编写出适合属性选择符的标记来。
到现在为止，我们介绍的选择符都有一个共同点，即它们针对的都是标记中的某个部分，比如标签名、类名、ID、属性或属性值。然而，使用 CSS 还可以在某些事件发生时，改变某些元素的样式，比如用户鼠标悬停在一个链接上。而这就要靠伪类来实现了。
在图片的 title 属性值为 red flower 的情况下，才会为图片添加边框。换句话说，下面这个 img 元素就会被加上边框。
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
当然，属性选择符还有其他形式，感兴趣的话，就请访问 http://www.stylinwith-css.com 吧。
2005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
