02-基础选择器.md

CSS基础选择器

1、标签选择器

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

• 标签选择器的作用是为页面中某一类标签指定统一的CSS样式
• 优点是能快速为页面中同类型的标签统一设置样式
• 缺点是不能设计差异化样式，只能选择全部的当前标签

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

/* 为所有的<div>标签统一设置样式 */
div {
    color: red;
}

• 规范：
  • 属性值前面，冒号后面，保留一个空格
  • 标签名和大括号中间保留空格

2、类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

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

.div-red {
    color: red;
}

• 结构需要用class属性来调用

<div class="div-red">hello</div>

注意：

1. 类选择器在 HTML 中以 class 属性表示，在CSS中，类选择器以一个点 . 号表示
2. 记忆口诀：样式点定义，结构类调用

类选择器-多类名

我们可以给一个标签指定多个类名，简单理解就是一个标签有多个名字

多类名中间用空格分隔

<div class="div-red div-font">hello</div>


.div-red {
    color: red;
}
.div-font {
    font-size: 20px;
}

• 在标签 class 属性中写多个类名
• 多个类名中间必须用空格分开
• 这个标签就可以分别具有这些类名的样式

✍多类名开发中使用场景：

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

3、id选择器

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

<div id="div-red">hello</div>

#div-red {
    color: red;
}

注意：

• id 属性只能在每个 HTML 文档中出现一次。
• 记忆口诀：样式 # 定义，结构 id 调用。只能调用一次，别人切勿使用

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

• 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
• id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
• id 选择器和类选择器最大的不同在于使用次数上
• 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

记忆口诀：

• 样式点定义，结构类调用
• 样式 # 定义，结构 id 调用

4、通配符选择器

CSS 中， 通配符使用 * 定义，它表示选取页面中所有元素(标签)。

* {
    属性1: 属性值1;
    ...
}

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 一般是用于清楚元素标签的内外边距

* {
    margin: 0;
    padding: 0;
}

5、总结

基础选择器	作用	特点	使用情况	语法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	p {color: red}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav {color: red}
id 选择器	一次只能选择1个标签	ID 属性只能在每个 HTML 文档中出现一次	一般和 js 搭配	#nav {color: red}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red}