第二章——CSS基础选择器，标签选择器，类选择器， id 选择器，通配符选择器

2.1 CSS选择器的作用

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

h1 { color : red; font-size : 25px;}

以上 CSS 做了两件事：

1. 找到所有的 h1 标签。 选择器（选对人）。
2. 设置这些标签的样式，比如颜色为红色（做对事）。

2.2 CSS选择器分类

• 基础选择器 ：是由单个选择器组成的
• 复合选择器 ：

2.3 CSS 基础选择器分类

• 标签选择器
• 类选择器
• id 选择器
• 通配符选择器

2.4 标签选择器

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

• 语法：

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
} 

• 说明：
  • 作用 标签选择器可以把某一类标签全部选择出来，比如所有的 标签和所有的 标签。
  • 优点 ：能快速为页面中同类型的标签统一设置样式。
  • 缺点 ：不能设计差异化样式，只能选择全部的当前标签

2.5 类选择器

• 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
• 语法(被选中的标签需要有class属性)

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

• 代码示例

    


    
'blue'>这是一个div标签

2.5.1 多类名选择

1. 多类名使用方式

"red font20">亚瑟

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

2. 多类名开发中使用场景

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

2.6 id选择器

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

1. 语法：

#id名 {
 属性1: 属性值1; 
 ...
} 

2. 示例

    


    
'blue'>这是一个div标签

2.7 id选择器与类选择器的区别‘

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

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

2.8 通配符选择器

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

1. 语法：

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

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

2. 代码示例：

* {
 margin: 0;//检索或设置对象四边的外延边距
 padding: 0;//检索或设置对象四边的内部边距
}

2.9 选择器对比

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