1，标签选择器（以标签名命名的选择器）
结构：
标签名{CSS属性名:属性值;}
注：选中所有的这个标签都生效CSS。
2，类选择器
结构：
.类名{CSS属性名：属性值;}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式。
注：
①所有标签上都有class属性，class属性值称为类名。
②类名不能由数字或中划线开头。
③一个标签可以同时有多个类名，类名之间空格隔开。
④类名可以重复，一个类选择器可以同时选中多个标签。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .color{ color: purple; } </style> </head> <body> <p class="color">这是第一句话</p> <p>这是第二句话</p> <p>这是第三句话</p> <h1 class="color">这是第一个标题</h1> </body> </html>
页面效果展示：
3，id选择器（配合Javascript找标签使用）
结构：
#id属性值{CSS属性名:属性值;}
注：
①所有标签都有id属性。
②id属性值类似于身份证号，在一个页面中是唯一的，不可重复。
③一个标签上只能有一个id属性值。
④一个id选择器只能选中一个标签。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #color { color: red; } </style> </head> <body> <p id="color">这是第一句话</p> <p>这是第二句话</p> <p>这是第三句话</p> <h1 id="color">这是第一个标题</h1> </body> </html>
页面效果展示：
4，通配符选择器
结构：
*{CSS属性名:属性值;}
作用：找到页面中所有标签，设置样式。
注：
①开发中使用极少，只会在极特殊情况下用到。
②可能会用于去除标签默认margin和padding（清除标签默认间距）
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ color: red; } </style> </head> <body> <p>这是第一句话</p> <p>这是第二句话</p> <p>这是第三句话</p> <h1>这是第一个标题</h1> </body> </html>
页面效果展示：
