14.7. CSS ID选择符

为什么使用ID选择符?

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

  • 为一个文档中的元素赋予唯一的ID属性,进而支持指定位置的链接(由于指定位置的链接只能是文档中一个确定的位置)
  • 为一个文档中的元素赋予唯一的ID属性,进而控制这个元素(控制元素可以通过JavaScript语言)
CSS ID选择符 -- 匹配文档中元素E的id属性的属性值为idname的元素
  • 语法: E#idname
    • E#idname,代表元素E的id属性的属性值为idname
  • 引用网址:http://www.dreamdu.com/css/selector_id/
  • 说明:
    • 匹配文档中元素E的id属性的属性值为idname的元素
    • ID选择符名称的定义方式是,#符号,英文"pound",后加ID名称idname
    • ID选择符的定义需要有#符号(#符号标明是ID选择符),但是HTML文档中的标签的id属性名不能出现#符号,见下面示例
    • id属性的特殊之处在于,一个文档中只能有一个元素使用一个ID选择符(与class属性正好相反),id属性可以用来单一地标识一个元素
  • ID选择符的英文名称为"id selectors",id是IDentifier的缩写,中文"标识符"的意思

示例

#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.valuediv[id=value]相同

div#dreamdu-red
{
	color: red;
}

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

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

浏览器兼容性

CSS ID选择符浏览器兼容性
选择符 IE6 IE7 IE8 IE9 FF CH OP SA
E#idname yes yes yes yes yes yes yes yes


  • 教程中有什么不懂的地方?发现教程的错误!对教程有什么建议!快快联系猴子呀dreamdu@163.com,:)
赞助梦之都