CSS 根本选择器
CSS 基本选择器 在CSS的3个组成部分中,“对象”是很重要的,它指定了对哪些网页元素进行设置,因此,它有一个
CSS 基本选择器
在CSS的3个组成部分中,“对象”是很重要的,它指定了对哪些网页元素进行设置,因此,它有一个专门的名称 —— 选择器(selector)。
选择器是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果。
基本选择器有标记选择器、类别选择器和ID选择器3种,下面分别介绍。
1. 标记选择器
一个HTML页面由很多不同的标记组成,而CSS标记选择器就是声明哪些标记采用哪种CSS样式。因此,每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如P选择器,就是用于声明页面中所有印>标记的样式风格。同样可以通过 h1 选择器来声明页面中所有的<h1>标记的CSS风格。例如下面这段代码:
图1 CSS标记选择器 如果希望所有<h1>标记不再采用红色,而是蓝色,这时仅仅需要将属性color的值修改为blue,即可全部生效。
CSS语言对于所有属性和值都有相对严格的要求。如果声明的属性在CSS规范中没有,或者某个属性的值不符合该属性的要求,都不能使该CSS语句生效。下面是一些典型的错误语句:
图2 类别选择器 例如当页面中同时出现3个<p>标记,并且希望它们的颜色各不相同,就可以通过设置不同的class选择器来实现。一个完整的案例如下所示,实例文件源码如下:
图3 类别选择器示例 3. ID选择器 ID选择器的使用方法跟class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,因此其针对性更强。在HTML的标记中只需要利用id属性,就可以直接调用CSS中的ID选择器,其格式如图1所示。下面举一个实际案例,示例文件如下:
图4 ID选择器 显示效果如图2所示,可以看到第2行与第3行都显示了CSS的方案,换句话说在很多浏览器下,ID选择器也可以用于多个标记。但这里需要指出的是,将ID选择器用于多个标记是错误的,因为每个标记定义的id不只是CSS可以调用,JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同id的标记,那么将会导致JavaScript在查找id时出错,例如函数getElementByld()。
图5 ID选择器示例 正因为JavaScript等脚本语言也能调用HTML中设置的id,因此ID选择器一直被广泛地使用。网站建设者在编写CSS代码时,应该养成良好的编写习惯,一个id最多只能赋予一个HTML标记。
另外从图2中还可以看到,最后一行没有任何CSS样式风格显示,这意味着ID选择器不支持像class选择器那样的多风格同时使用,类似“id="bold green"”是完全错误的语法。