1、全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始休，如：
*{color: blue;font-size: 30px;}，页面所有的元素将是蓝色，字体大小为30px;

2、标签选择器

用html的标签名称进行样式命名，如 h1{声明;声明}，那么中同一类的

标签都会起效。

3、类选择器

以.xxx开头对样式进行命名，如.p{声明;声明}，那么中class=”p”的元素都会起效。
同一个元素可以同时使用多个类，中间用空格隔开，如：

4、id选择器

用html元素的id名称进行样式命名，如#header{声明;声明}，那么中只有id为header的元素的样式才会起效。

5、合并选择器

作用：提取共同的样式，减少重复代码，如下：
标签选择器合并：p,h3{font-size:30px}
类选择器合并：.header,.footer{height:300px;}

6、选择器优先级

行内样式 > id选择器 > 类选择器 > 标签选择器 > 全局选择器

示例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <title>CSS样式选择器</title>
  8.     <style>
  9.       /* 全局选择器 */
  10.       *{
  11.         /* 字体颜色 */
  12.         color: blue;
  13.         /* 字体大小 */
  14.         font-size: 30px;
  15.       }
  17.       /* h1标签选择器 */
  18.       h1{
  19.         /* 字体颜色 */
  20.         color: blue;
  21.         /* 字体大小 */
  22.         font-size: 30px;
  23.       }
  25.       /* 类选择器 */
  26.       .p{
  27.         /* 字体颜色 */
  28.         color: blueviolet;
  29.         /* 字体大小 */
  30.         font-size: 30px;
  31.       }
  33.       /* id选择器 */
  34.       #header{
  35.         /* 字体颜色 */
  36.         color: aquamarine;
  37.         /* 字体大小 */
  38.         font-size: 30px;
  39.       }
  40.     </style>
  41.   </head>
  43.   <body>
  44.     <h1>
  45.       h1标签选择器
  46.     </h1>
  48.     <p class="p">
  49.       类选择器
  50.     </p>
  52.     <div id="header">
  53.       id选择器
  54.     </div>
  55.   </body>
  57. </html>