1. ID选择器允许以一种独立于文档元素的方式来指定样式。
2. 语法
2.1. 首先, ID选择器前面有一个#号, 也称为棋盘号或井号。
2.2. 请看下面的规则:
*#intro {
font-weight: bold;
}
2.3. 与类选择器一样, ID选择器中可以忽略通配选择器。前面的例子也可以写作:
#intro {
font-weight: bold;
}
2.4. 例子
2.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>CSS ID选择器</title>
<meta charset="utf-8" />
<style type="text/css">
#intro {
font-weight: bold;
}
</style>
</head>
<body>
<p id="intro">This is a paragraph of introduction.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>
2.4.2. 效果图
3. 类选择器还是ID选择器?
3.1. 区别1: 只能在文档中使用一次
与类不同, 在一个html文档中, ID选择器会使用一次, 而且仅一次。
3.2. 区别2: 不能使用ID词列表
不同于类选择器, ID选择器不能结合使用, 因为ID属性不允许有以空格分隔的词列表。
3.3. 区别3: ID能包含更多含义
类似于类, 可以独立于元素来选择ID。有些情况下, 您知道文档中会出现某个特定ID值, 但是并不知道它会出现在哪个元素上, 所以您想声明独立的ID选择器。例如, 您可能知道在一个给定的文档中会有一个ID值为 mostImportant的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容, 它可能在任何元素中, 而且只能出现一个。在这种情况下, 可以编写如下规则:
#mostImportant {
color: red;
background: yellow;
}
4. 区分大小写
4.1. 请注意, 类选择器和ID选择器可能是区分大小写的。这取决于文档的语言。html和xhtml将类和ID值定义为区分大小写, 所以类和ID值的大小写必须与文档中的相应值匹配。
4.2. 因此, 对于以下的css和html, 元素不会变成粗体:
#intro {
font-weight: bold;
}
<p id="Intro">This is a paragraph of introduction.</p>