学科分类
目录
HTML5+CSS3

CSS基础选择器

要想将CSS样式应用于特定的HTML标签,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则被称为选择器。在CSS中的基础选择器有标签选择器、类选择器、id选择器、通配符选择器,对它们的具体解释如下。

1. 标签选择器

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式,其基本语法格式如下。

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,所有的HTML标签名都可以作为标签选择器,例如body、h1、p、strong等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例如,可以使用p选择器定义HTML页面中所有段落的样式,示例代码如下。

p{font-size:12px; color:#666; font-family:"微软雅黑";}

上述CSS样式代码用于设置HTML页面中所有的段落文本,其中字体大小为12像素、颜色为#666、字体为微软雅黑。标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。

2. 类选择器

类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下。

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独的样式。

注意:

类名的第一个字符不能使用数字,并且严格区分大小写,一般采用小写的英文字符。

3. id选择器

id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下。

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id名是唯一的,只能对应于文档中某一个具体的元素。

在很多浏览器下,同一个id也可以应用于多个标签,浏览器并不报错,但是这种做法是不被允许的,因为JavaScript等脚本语言调用id时会出错。另外,最后一行没有应用任何CSS样式,这意味着id选择器不支持像类选择器那样定义多个值,类似“id="bold font24"”的写法是错误的。

4. 通配符选择器

通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素,其基本语法格式如下。

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标签的默认边距。

* {
​    margin: 0;           /* 定义外边距*/padding: 0;          /* 定义内边距*/
}

但在实际网页开发中不建议使用通配符选择器,因为通配符选择器设置的样式对所有的HTML标签都生效,不管标签是否需要该样式,这样反而降低了代码的执行速度。

点击此处
隐藏目录