选择器作用：选择页面上的某一个或者某一类元素。
基本的选择器有：标签选择器、类选择器、id选择器。
优先级：id选择器>类选择器>标签选择器

标签选择器

标签选择器是选择该文件的一类标签，对它们进行美化。
语法规范：
标签名{
声明1；
声明2；
……
}

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  6.     <style>
  7.         h1{
  8.             color: chartreuse;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  14. <h1>标题一</h1>
  15. <h1>标题二</h1>
  16. <h1>标题三</h1>
  17. <h2>小标题一</h2>
  18. <h2>小标题二</h2>
  19. <h2>小标题三</h2>
  21. </body>
  22. </html>

运行结果：
image.png

类选择器

选择规定好为同一类的标签对他们进行美化。
语法规范：
.class名{
声明1；
声明2；
……
}

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  6.     <style>
  7.       .class01{
  8.           color: #0080FF;
  9.       }
  11.       .class02{
  12.           color: red;
  13.       }
  14.     </style>
  15. </head>
  16. <body>
  18. <h1 class="class01">标题一</h1>
  19. <h1>标题二</h1>
  20. <h1 class="class02">标题三</h1>
  21. <h2 class="class01">小标题一</h2>
  22. <h2>小标题二</h2>
  23. <h2 class="class02">小标题三</h2>
  25. </body>
  26. </html>

运行结果：
image.png

id选择器

选择已经指定好id的标签进行美化，id必须唯一，不能重复。
语法规范：
#id名{
声明1；
声明2；
……
}

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  6.     <style>
  7.       #id01{
  8.           color: #0080FF;
  9.       }
  11.       #id02{
  12.           color: red;
  13.       }
  15.       #id03{
  16.           color: brown;
  17.       }
  18.     </style>
  19. </head>
  20. <body>
  22. <h1 id="id01">标题一</h1>
  23. <h1>标题二</h1>
  24. <h1 id="id02">标题三</h1>
  25. <h2 id="id03">小标题一</h2>
  26. <h2>小标题二</h2>
  27. <h2>小标题三</h2>
  29. </body>
  30. </html>

运行结果：
image.png