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标签都生效，不管标签是否需要该样式，这样反而降低了代码的执行速度。