在css里面,元素的定义是通过各种选择器来进行的。所以,选择器是CSS里面非常重要的一部分知识。根据不同的样式定义,CSS提供了不同类型的选择器。下文首先跟大家简单介绍一下其中的ID选择器.
1.什么是ID选择器
在CSS里面ID选择器的作用就是指定唯一元素,就像你的QQ号一样,是唯一的,。
2.相关语法
首先,要在ID选择器前面添加一个#号,称为井号或棋盘号。
请看下面的规则:
*#intro{font-weight:bold;}
由于ID选择器中可以忽略通配选择器。因此,上面的例子可以改为:
#intro{font-weight:bold;}
以上两种写法完全等价.
接着我们看一下ID选择器的值,与类选择器不同,ID选择器引用的是ID属性中的值,它绝对不会引用class属性的值.
以下是一个实际ID选择器的例子:
3.类选择器和ID选择器的区别
区别1:使用次数不同
同一个ID值,在一个html文档中有且仅能使用一次,而类选择器中的类名则可以多次使用。
区别2:是否能使用词列表
由于ID属性不允许使用有空格分隔的词列表,ID选择器不能像类选择器那样使用词列表。
区别3:ID能包含更多含义
譬如,您知道在一个给定的文档中可能会有一个ID值为mostImportant的元素,但你不知道这个元素是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个元素,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:
#mostImportant{color:red;background:yellow;}
这个规则会与以下各个元素匹配,如下图:
重点注意:这些元素因为它们都有相同的ID值,所以不能在同一个文档中同时出现:
4.大小写的区分
温馨提示:我们在编辑ID值时,必须注意大小写的问题.因为HTML和XHTML对ID值的大小写非常敏感,所以ID值的大小写必须与文档中的相应值匹配,否则就不会出现效果。如下面的规则:
运行后,元素不会变成粗体,这是由于字母i的大小写不同导致选择器不会识别上面的元素。
跟类选择器相比,ID选择器的使用频率相对低一些,因为其可重用率一般没有类选择器多,而且不支持词列表,但它有时会比类选择器方便,比如我们要为页面上某个因为需要脚本控制而定义了id的元素设置样式,并且该样式在其他地方不需要重用,那么我们就没有必要为这个元素创建一个类选择器,而直接用ID选择器即可。
此外在一些特殊的场合,ID选择器也能发挥相当重要的作用,比如一个网站有多篇文章,每篇文章都有一个重点内容,但这个重点可能是标题,正文甚至是一张图片,这时候用ID选择器就会比类选择器方便得多。
考虑到ID和类选择器各有优缺点,CSS还提供了更多更强大的选择器,如后代选择器,子元素选择器等等,在大家对ID选择器熟悉了之后,就可以继续去深入了解这些更高级的选择器了。