文章目录
CSS基础选择器CSS基础选择器的作用选择器的分类标签选择器类选择器类选择器-多类名id 选择器id 选择器 和 类选择器的区别*通配符选择器基础选择器的总结：CSS基础选择器
CSS基础选择器的作用
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选标签用的。
以上CSS做了两件事：
1.找到所有 h1 标签，选择器 （选对人）。
2.设置这些标签的样式，比如颜色为红色（做对事）。
选择器的分类
选择器分为基础选择器和复合选择器两大类。
基础选择器是由单个选择器组成的。
基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器。
标签选择器
标签选择器（元素选择器）是用HTML标签名作为选择器，按标签名分类，为页面某一类标签指定统一的CSS样式。
语法：
标签名 {属性1：属性值1;属性2：属性值2;属性3：属性值3;...}
作用:
标签选择器可以把某一类标签全部选择出来，比如左右的<div>标签和所有的<span>标签。
优点
能快速为页面中同一类型的标签设置统一样式。
缺点
不能设置设计差异化样式，只能选择全部标签。
<head><style>h3 {color: pink;font-size: 125px;}</style></head><body><h3>月亮不睡你不睡</h3><h3>你不秃头谁秃头</h3><h2>我还是你爱的小秃头嘛</h></body>
h3设置了样式属性，所以代码里的 h3 全都变成了粉色，125像素，而h2没有设置样式属性，显示是本来的样子。
类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以用类选择器。
类选择器在HTML中以 class 属性表示，在 CSS中，类选择以一个点 " . " 号显示。
语法：
.类名 {属性1：属性值1；...}
例如，将所有的 red 类的 HTML 元素均为红色。
.red {color: red;}
语法:
结构需要用class 属性来调用 class 类的意思。
<div class="red"> 变红色 </div>
注意:
类选择器使用 " . " （英文点号）进行标识，后面紧跟类名 （自定义，我们自己命名的）。可以理解为给这个标签起一个名字，来表示。长名称或词组可以使用中横线来为选择器命名。不要使用纯数字、中文等命名，尽量使用英文字母来表示。命名要有意义，尽量使别人一眼就知道这个类名的目的。
记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。
案例：
利用类选择器画3个盒子
<head><style>.red {width: 100px;height: 100px;/*背景颜色*/background-color: red;}.green {width: 100px;height: 100px;background-color: green;}</style></head><body><div class="red">红色</div><div class="green">绿色</div><div class="red">红色</div></body>
展示图
类选择器-多类名
我们可以给一个选择器指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。
简单理解就是一个标签有多个名字。
多类名使用方式
<head><style>.pink {color: pink;}.font5 {font-size: 100px;}</style></head><body><div class="pink font5">奶盖</div></body>
在标签 class 属性中写 多个类名多个类名中间必须要用空格隔开这个标签就可以分别具有这些类名的样式
多类名开发中使用场景
可以把一些标签元素相同的样式（共同的部分）放 到一个类里面。这些标签都可以调用这个公共的类，然后再调用自己独有的类。
案例：
利用多类选择器画3个盒子
<head><style>/*公共的样式*/.box {width: 100px;height: 100px;font-size: 25px;}.red {/*背景颜色*/background-color: red;}.green {background-color: green;}</style></head><body><div class="red box">红色</div><div class="green box">绿色</div><div class="red box">红色</div></body></html>
会发现多类名的效果图和一个类名的效果图相同，并且代码比之前的更加简便。
各个类名中间用空格隔开。简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字。这个标签就可以分别具有这些类名的样式。从而节省CSS代码，统一修改也非常方便。多类名选择器在后期的布局比较复杂的情况下，比较多的使用
id 选择器
id 选择器可以标有特定 id 的 HTML 指定特定的样式。
HTML 元素 id 属性 来设置 id 选择器，CSS 中 id选择器以 “#” 来定义。
语法 ：
#id名 {属性值1：属性值1；...}
例如，将 id 为 nav 元素中的内容设计为红色。
<head><style>#nav {color: red;}</style></head><body><nav id="nav">瓜甜不甜，尝一口不就知道了</nav></body>
注意：id 属性只能在每个HTML文档中出现一次。口诀：样式 # 定义，只能 id 调用，只能调用一次，别人切勿使用。
id 选择器 和 类选择器的区别
类选择器(class)好比人的名字，一个人可以用多个名字，同时一个名字也可以被多个人使用。id 选择器 好比人的身份证号码，全国是唯一的，不得重复。id 选择器和类选择器最大的不同在于使用次数上。类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。*通配符选择器
在CSS中，通配符选择器使用 " * "定义，它表示选择取页面中所有元素 （标签）。
语法：
* {属性值1：属性值;}
通配符选择器不需要调用，自动给所有元素使用样式。
特殊情况才用到
比如清除所有元素的内外边距
* {margin : 0;padding: 0；}
