发布日期:2013-02-25 15:51 来源:佚名 标签: CSS ID 选择符
 

为什么使用ID选择符?

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

为一个文档中的元素赋予唯一的ID属性,进而支持指定位置的链接(由于指定位置的链接只能是文档中一个确定的位置)

为一个文档中的元素赋予唯一的ID属性,进而控制这个元素(控制元素可以通过JavaScript语言)

CSS ID选择符 -- 匹配文档中元素E的id属性的属性值为idname的元素

语法: E#idname

E#idname,代表元素E的id属性的属性值为idname

说明:

匹配文档中元素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标签显示样式

推荐: 如果一个文档中出现多个元素具有相同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]更明确

浏览器兼容性


相关评论

专题信息
    如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。CSS最主要的目的是将文件的内容与显示分隔开来,有着许多的好处。如果你是初学者,那么就从我们的 CSS 入门基础教程开始吧,相信您肯定会受益良多的。