【前端 - CSS】第 11 课 - 选择器

        欢迎来到博主 Apeiron 的博客，祝您旅程愉快 ！ 时止则止，时行则行。动静不失其时，其道光明。

---

目录

1、缘起

2、基础选择器

2.1、标签选择器 

2.2、类选择器 

2.3、id 选择器 

2.4、通配符选择器 

3、画盒子 

4、总结 

---

1、缘起

        在 CSS 中，选择器的作用是 查找标签 并且为其 设置样式 。常用的基础选择器如下，，，

---

2、基础选择器

2.1、标签选择器 

标签选择器：使用 标签名 作为选择器，选中 同名标签 设置 相同的样式。

例如：p，h1，div，a，img ......

特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 

示例代码：

    
第一个 p 标签
    
第二个 p 标签
    
第三个 p 标签
    

---

2.2、类选择器 

作用：查找标签，差异化 设置标签的显示效果

（1）步骤：

        ①  定义类选择器 -> .类名

        ②  使用类选择器 -> 标签添加  class = "类名"

（2）特点：

        ①  一个类选择器可以给多个标签使用

        ②  一个标签可以使用多个类名，class 属性值写多个类名，类名之间用空格隔开

示例代码： 

    
第一个 p 标签
    
第二个 p 标签
    
第三个 p 标签
 
    
第一个 div 标签
    
第二个 div 标签
    
第三个 div 标签
   

---

2.3、id 选择器 

作用：查找标签，差异化 设置标签的显示效果

场景：id 选择器一般 配合 JavaScript 使用，很少用来设置 CSS 样式

（1）步骤：

        ①  定义 id 选择器 -> #id 名

        ②  使用 id 选择器 -> 标签添加 id = " id 名"

（2）规则：

        同一个 id 选择器在一个页面只能使用一次

示例代码： 

    
第一个 p 标签
    
第二个 p 标签
    
第三个 p 标签
 
    
第一个 div 标签
    
第二个 div 标签
    
第三个 div 标签
   

---

2.4、通配符选择器 

作用：查找页面 所有标签，设置相同样式

通配符选择器：* ，不需要调用，浏览器 自动 查找页面 所有标签，设置相同的样式。开发项目初期，清楚标签默认样式的时候使用 。

示例代码： 

    
 p 标签
    
 div 标签
    
h1 标签

---

3、画盒子 

目标：使用合适的选择器画盒子

新属性如下：

属性名	作用
width	宽度
height	高度
background-color	背景色

示例代码：

    
div
    
div

---

 

4、总结 

        本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦 ！！

前端 - CSS 专栏系列将持续更新 ，，，，，，