小白也能做的选择（上）

---

前言

基础选择器是由单个选择器组成。

标签选择器（元素选择器）

书写格式（示例）：

标签名 {
	属性: 属性值;
       }

说明：

用 HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的<div>和<span>标签

优点：

  能快速为页面中同类型的标签统一设置样式

缺点：

不能设计差异化样式，只能选择全部的当前标签

类选择器

书写格式（示例）：

.类名{
        属性: 属性值;
	......
     }

<div class="类名">什么是快乐星球！</div>

多类名

多类名的使用方式：

  <style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
  </style>

<div class="red font35">什么是快乐星球</div>

注意：

（1） 在标签中class属性中写多个类名

（2） 多个类名中间必须用空格分开

（3） 这个标签就可以分别具有这些类名的样式

---

多类名的使用场景：

<div class="pink font20">什么是快乐星球</div>

<div class="pink ">什么是快乐星球</div>

<div class="font15">什么是快乐星球</div>

<div class="pink font15">什么是快乐星球</div>

注意：

（1） 可以把一些标签元素相同的样式（共同的部分）放到一个类里面

（2） 这些标签都可以调用这个公共的类，然后再调用自己独有的类

（3） 从而节省CSS代码，统一修改也非常方便

---

id 选择器

书写格式（示例）：

#id名{
	属性：属性值;
	......
}

<div id="id名">什么是快乐星球！</div>

id选择器的口诀：

样式 # 定义
结构 id 调用
只能调用一次
别人切勿使用

id 选择器和类选择器的区别：

（1）类选择器（class）相当于的名字，一个人可以有多个名字，同一个名字也可以被多个人使用

（2）id 选择器相当于人的身份证号码，全中国是唯一的，不得重复

（3）id 选择器和类选择器最大的不同在于使用次数上

（4）类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

通配符选择器

书写格式（示例）：

 *｛
     属性：属性值；
     ......
   ｝

应用举例（清除所有的元素标签的内外边距）：

 *｛
      margin： 0；
      padding： 0；
   ｝

注意：

（1）通配符选择器不需要调用，自动就给所有的元素使用样式

（2）特殊情况才使用