CSS基础02-CSS基础选择器

02-CSS基础选择器

2.1CSS选择器的作用

选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用。简单来说就是选择标签用的。

2.2选择器的分类

选择器分为基础选择器和复合选择器两大类。基础选择器是由单个选择器组成的，基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器.

2.3标签选择器

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

作用：标签选择器会把某一类标签全部选出来，比如所有的<div>标签、所有的<p>标签等

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

缺点：不能设计差异化样式，只能选择同一类标签的全部

2.4类选择器

如果想要差异化选择不同的标签，单独选一个或几个标签，就可以使用类选择器。类选择器在HTML中以class属性表示，在CSS中，类选择器以“.类名”来表示

<style>
    /* 所有属于red类的标签都会变为红色 */
    .red {
        color: red;
    }
</style>

<div class="red">
    这是一个红色的盒子
</div>

注意点：

1. 类选择器使用“.”进行标识，后面紧跟类名（用户自己命名）
2. 可以理解为给标签起了一个名字
3. 长名称或词组可以使用中横线来命名，例如 “div-red”
4. 不要使用纯数字、中文等命名，尽量使用英文字母
5. 命名要有意义，尽量做到“顾名思义”

类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。通过这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

1. 多类名的使用方式

   <div class="red font20">1号盒子</div>
   

   1. 在标签class属性中编写多个类名
   2. 多个类名中间必须用空格分开
   3. 该标签可以具有这多个类的样式

2. 多类名的使用场景：

   1. 可以把一些标签元素相同的样式（公共部分）放到一个类里面
   2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
   3. 从而节省CSS代码，并方便统一修改

2.5id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。HTML中以id属性来设置id选择器，CSS中id选择器以“#id名”来定义。

注意点：同一个id属性只能在每个HTML文档中出现一次，不允许两个标签有相同的id属性值

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

1. 类选择器（class）好比人的名字，一个人可以有多个名字，一个名字也可以被多个人使用
2. id选择器好比是人的身份证号码，不得重复
3. id选择器与类选择器最大的区别在于使用次数上
4. 类选择器在修改样式中使用最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript配合使用

2.6通配符选择器

在CSS中，通配符选择器使用“*”定义，它表示选取页面中的所有元素（标签）。

<style>
    * {
        color: red;
    }
</style>

• 通配符选择器不需要调用，自动给所有元素使用样式
• 特殊情况才使用，例如消除所有元素标签的内外边距等