标签和所有的 标签。

优点

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

缺点

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

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

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

语法

.类名 {
属性1: 属性值1;
...
}
例如，将所有拥有 red 类的 HTML 元素均为红色。

.red {
color: red;
}
调用

结构需要用class属性来调用 class 类的意思

注意

① 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。

② 可以理解为给这个标签起了一个名字，来表示。

③ 长名称或词组可以使用中横线来为选择器命名。

④ 不要使用纯数字、中文等命名，尽量使用英文字母来表示。

⑤ 命名要有意义，尽量使别人一眼就知道这个类名的目的。

⑥ 命名规范：见附件（ Web 前端开发规范手册.doc）

记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。

简单理解就是一个标签有多个名字。

1. 多类名使用方式

(1) 在标签class 属性中写 多个类名

(2) 多个类名中间必须用空格分开

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

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

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

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

(3) 从而节省CSS代码，统一修改也非常方便.

各个类名中间用空格隔开
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式
从而节省CSS代码，统一修改也非常方便.
多类名选择器在后期布局比较复杂的情况下，还是较多使用的
2.5 id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

语法

id名 {

属性1: 属性值1; 
...

}
例如，将 id 为 nav 元素中的内容设置为红色。

nav {

color:red;

}
注意：id 属性只能在每个 HTML 文档中出现一次。

口诀: 样式#定义,结构id调用，只能调用一次，别人切勿使用。

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

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

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

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

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

2.6 通配符选择器

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

语法

• {
  属性1: 属性值1;
  ...
  }
  通配符选择器不需要调用， 自动就给所有的元素使用样式
  特殊情况才使用，后面讲解使用场景（以下是清除所有的元素标签的内外边距，后期讲）
• {
  margin: 0;
  padding: 0;
  }
  2.7 基础选择器总结
  基础选择器 作用 特点 使用情况 用法
  标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p{color: red;}
  类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav{color: red;}
  id选择器 一次只能选择一个标签 ID属性只能在每个HTML文档中出现一次 一般和js搭配 #nav{color: red;}
  通配符选择器 选择所有的标签 选择的太多，有部分不需要 特殊情况使用 {color: red;}
  每个基础选择器都有使用场景，都需要掌握
  如果是修改样式，类选择器是使用最多的
  CSS 的复合选择器
  3.1 什么是复合选择器
  在 CSS 中，可以根据选择器的类型把选择器分为 基础选择器 和 复合选择器 ，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
  复合选择器可以更准确、更高效的选择目标元素（标签）
  复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
  3.2 后代选择器 (重要）
  后代选择器 又称为 包含选择器 ，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
  语法：
  元素1 元素2 { 样式声明 }
  上述语法表示 选择元素 1 里面的所有元素 2 (后代元素)。
  例如：
  ul li { 样式声明 } / 选择 ul 里面所有的 li标签元素 */
  元素1 和 元素2 中间用空格隔开
  元素1 是父级，元素2 是子级，最终选择的是元素2
  元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
  元素1 和 元素2 可以是任意基础选择器
  3.3 子选择器 (重要）
  子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

语法：

元素1 > 元素2 { 样式声明 }
上述语法表示 选择元素1里面的所有直接后代（子元素）元素2 。
例如：
div > p { 样式声明 } / 选择 div 里面所有最近一级 p 标签元素 /
元素1 和 元素2 中间用 大于号 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫他 亲儿子选择器
3.4 并集选择器 (重要）
并集选择器可以选择多组标签, 同时为他们定义相同的样式 。通常用于集体声明。
并集选择器 是各选择器 通过英文逗号（,）连接而成 ，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1,元素2 { 样式声明 }
上述语法表示 选择元素1 和 元素2 。
例如：
ul,div { 样式声明 } / 选择 ul 和 div标签元素 /
元素1 和 元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
3.5 伪类选择器
伪类选择器 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是 用冒号（:）表示 ，比如 :hover 、 :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
3.6 链接伪类选择器
一 链接伪类选择器注意事项.
二 链接伪类选择器实际开发中的写法.
链接伪类选择器注意事项

1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
2. 记忆法：love hate 或者 lv 包包 hao 。

3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
   链接伪类选择器实际工作开发中的写法：

   / a 是标签选择器 所有的链接 /
   a {
   color: gray;
   }
   / :hover 是链接伪类选择器 鼠标经过 /
   a:hover {
   color: red; / 鼠标经过的时候，由原来的 灰色 变成了红色 /
   }
   3.7 :focus 伪类选择器
   :focus 伪类选择器 用于选取获得焦点的表单元素。
   焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
   input:focus {
   background-color:yellow;
   }
   3.8 复合选择器总结
   选择器 作用 特征 使用情况 隔开符号及用法
   后代选择器 用来选择后代元素 可以是子孙后代 较多 符号是空格 .nav a
   子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于 .nav>p
   并集选择器 选择某些相同图案的元素 可以用于集体声明 较多 符号是逗号 .nav,.header
   连接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a{}和a:hover实际开发的写法
   :focus选择器 选择获得光标的表单 跟表单相关 较少 input:focus 记住这个写法