14.7. CSS ID选择符

为什么使用ID选择符？

因为每个文档中元素id的属性值是唯一的，通过唯一的值，可以：

• 为一个文档中的元素赋予唯一的ID属性，进而支持指定位置的链接（由于指定位置的链接只能是文档中一个确定的位置）
• 为一个文档中的元素赋予唯一的ID属性，进而控制这个元素（控制元素可以通过JavaScript语言）

示例

#dreamdu-red
{
	color: red;
}

<div id="dreamdu-red">红色字体</div>

当id属性为dreamdu-red的标签显示样式，一个文档中元素id属性值为dreamdu-red的只能出现一次

专有元素的类选择符

*#dreamdu-red
{
	color:red;
}

当id属性为dreamdu-red的标签显示样式

p#dreamdu-red
{
	color:red;
}

当id属性为dreamdu-red的p标签显示样式

CSS ID选择符示例 -- 可以尝试编辑

猴子推荐: 如果一个文档中出现多个元素具有相同id属性值的情况，浏览器也可以解析网页，但是由于id的名称是唯一的会造成网页中的冲突。例如：指定位置的链接中如果两个元素使用了同一个id名称，浏览器将不知链接到何处，只能选择链接到第一个。又例如使用JavaScript控制网页中的一个元素，而此元素和其它元素具有相同的id名称，也会出现浏览器无法准确得知控制那个元素的问题，因此好的习惯是一个id选择符在同一个文档中最多使用一次

ID选择符与属性值选择符

HTML中的div.value与div[id=value]相同

div#dreamdu-red
{
	color: red;
}

div[id=dreamdu-red]
{
	color: red;
}

上面的两个例子具有相同的含义，但是从层叠的角度，ID选择符比属性选择符具有更高的优先级，而且选择符#dreamdu-red比[id=dreamdu-red]更明确

浏览器兼容性

• CSS选择符浏览器兼容性索引

• CSS教程

• 14 CSS选择符
• 14.1 CSS选择符语法
• 14.2 CSS选择符简写方式
• 14.3 HTML文档树（元素的包含与排列关系）
• 14.4 CSS类型选择符
• 14.5 CSS全局选择符
• 14.6 CSS类选择符
• 14.7 CSS ID选择符
• 14.8 CSS组合选择符
• 14.9 CSS属性选择符
• 14.10 CSS选择符总结