CSS教程（二）- CSS选择器及特性

1、CSS 选择器

1. 作用

匹配文档中的某些元素为其应用样式。
根据不同需求把不同的标签选出来。

2. 分类

分类
- 基础选择器
  - 包含标签选择器、ID选择器、类选择器、通用选择器等
- 复合选择器
  - 包含后代选择器、子代选择器、伪类选择器等

2.1 标签选择器

介绍
- 又称为元素选择器，根据标签名匹配文档中所有该元素，为页面中某一类标签指定统一的CSS样式。

语法

css 复制代码

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

说明
- 选择器：指需设置样式的 HTML 元素。
- 声明块包含一条或多条用分号分隔的声明。
- 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
- 多条 CSS 声明用分号分隔，声明块用花括号括起来。
优点
- 能快速为页面中同类型的标签统一设置样式。
缺点
- 不能设计差异化样式，只能选择全部的当前标签。

2.2 ID选择器

介绍
- 根据元素的 id 属性值匹配文档中唯一的元素，id具有唯一性，不能重复使用。
- 在 CSS 中 ID选择器以 # 来定义

语法

css 复制代码

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

注意
- id属性值自定义，可以由数字、字母、下划线、- 组成，不能以数字开头;
- 尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示。
口诀
- ++样式#定义，结构id调用，只能调用一次++

2.3 类选择器

介绍
想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
- 根据元素的class属性值匹配相应的元素，class属性值可以重复使用，实现样式的复用（简言之：用于查找或选取要设置样式的 HTML元素）

语法

css 复制代码

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

说明
- 长名称或词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
- 命名要有意义，尽量使别人一眼就知道这个类名的目的。
口诀
- 样式点定义，结构类调用
特殊用法
1. 类选择器与其他选择器结合使用
  css 复制代码
```
a.c1{ }
```
  - 注意：标签与类选择器结合时，标签在前，类选择器在后
2. class属性值可以写多个（多个类名之间必必须用 ++空格++ 分开），共同应用类选择器的样式
  css 复制代码
```
<p class="c1 c2"></p>
```

2.4 通用选择器

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

语法

css 复制代码

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

说明
- 通常在最开始对页面设置内边距与外边距的设置（默认body与页面会存在边距）。
  css 复制代码
```
*{
    padding: 0;
    margin: 0;
}
```

2.5 群组选择器

介绍
- 也称为并集选择器，可以使用多个不同的选择器为一组元素统一设置样式。

语法

css 复制代码

selector1,selector2,selector3{	
      属性1: 属性值1;
      属性2: 属性值2;
      ...    
}

2.6 后代选择器

介绍
- 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

语法

css 复制代码

selector1 selector2{
	属性1： 属性值1;
	...
}

说明
- 匹配selector1中所有满足selector2的后代元素
- selector1 与 selector2 可以是任意的基础选择器

2.7 子代选择器

介绍
- 匹配满足选择器的所有直接子元素，只能选择作为某元素的最近一级子元素

语法

css 复制代码

selector1>selector2{
	属性1： 属性值1;
	...    
}

说明
- selector2 必须是 selector1 的亲子元素

2.8 伪类选择器

介绍
- 为元素的不同状态分别设置样式，必须与基础选择器结合使用。
特点
- 用冒号（:）表示，如：:hover、:first-child、:last_child

1、链接伪类选择器

分类

css 复制代码

:link 	    超链接访问前的状态
:visited    超链接访问后的状态
:hover	 鼠标滑过时的状态
:active     鼠标点按不抬起时的状态(激活)

使用

css 复制代码

a:link{
}

a:visited{
}

a:hover{
    color: red;
}

input:focus{
    background-color: yellow;
}

注意
1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序【LVHA】声明
  css 复制代码
```
:link
:visited
:hover
:active
```
2. 超链接常用设置 :
  css 复制代码
```
a{
	/*统一设置超链接默认样式(不分状态)*/
}
a:hover{
	/*鼠标滑过时改样式*/
}
```

2、焦点伪类选择器

:focus
- 用于选取获得焦点的表单元素。
- 一般情况 <input> 类表单元素才能获取

示例

css 复制代码

input:focus {  
   background-color:yellow; 
}

3、结构伪类选择器

作用
- 根据元素的结构关系查找元素
选择器

选择器说明

E:first-child 查找第1个E元素

E:last-child 查找最后一个E元素

E:nth-child(N) 查找第N个E元素（第1个元素N值为1）
- :nth-child(公式)
  - 作用：根据元素的关系结构查找多个元素。
    
    公式功能
    
    2n 偶数标签
    
    2n+1； 2n-1 奇数标签
    
    5n 找到5的倍数的标签
    
    n+5 找到第5个以后的标签
    
    -n+5 找到第5个以前的标签

选择器	说明
E:first-child	查找第1个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第1个元素N值为1）

公式	功能
2n	偶数标签
2n+1； 2n-1	奇数标签
5n	找到5的倍数的标签
n+5	找到第5个以后的标签
-n+5	找到第5个以前的标签

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      li:first-child {
        background-color: aquamarine;
      }

      li:last-child {
        background-color: greenyellow;
      }

      li:nth-child(2n-1) {
        background-color: blueviolet;
      }

      li:nth-child(n + 2) {
        background-color: gold;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>li 1</li>
      <li>li 2</li>
      <li>li 3</li>
      <li>li 4</li>
      <li>li 5</li>
      <li>li 6</li>
    </ul>
  </body>
</html>

4、伪元素选择器

作用
- 创建虚拟 元素（伪元素），用来摆放装饰性的内容
选择器

选择器说明

E::before 在E元素里面最前面添加一个伪元素

E::after 在E元素里面最后面添加一个伪元素
注意
- 必须设置 content: "" 属性，用来设置 伪元素的内容，如果无内容，则引号留白即可
- 微元素必须是 行内 显示模式
- 权重 和 标签选择器 相同。
应用场景
- 插入内容‌：使用::before和::after伪元素在元素的前后插入内容，如在段落前添加引用符号、图标装饰等‌
- 分割符号‌：使用::before和::after伪元素在列表项之间添加分割线或其他符号，提高列表的可读性‌
- 清除浮动‌：使用::after伪元素来清除浮动，保证容器正确包裹元素‌
- 首行缩进‌：使用::first-line伪元素来设置元素内第一行的样式，如字体、颜色等‌
- 首字母样式‌：使用::first-letter伪元素来设置元素内第一个字母的样式，如字体大小、颜色等‌

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 300px;
        background-color: rosybrown;
      }

      div::before {
        content: "老鼠";
        width: 100px;
        height: 100px;
        background-color: royalblue;
        display: block;
      }

      div::after {
        content: "大米";
        width: 50px;
        height: 50px;
        background-color: palegoldenrod;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>爱</div>
  </body>
</html>

总结

3. 样式表特性

1. 层叠性

多组CSS样式共同作用于一个元素，就会出现 覆盖（层叠） 另一个冲突的样式。
层叠原则
- 样式冲突：遵循就近原则（哪个样式离结构近，就执行哪个样式）
- 样式不冲突，就不会重叠

2. 继承性

后代元素可以继承祖先元素中的某些样式（子承父业），如文本颜色和字号。
- 例 : 大部分的文本属性都可以被继承
说明
- 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
拓展
- 行高的继承
  - 如果子元素没有设置行高，则会继承父元素的行高为 1.5，此时子元素的行高是：当前子元素的文字大小 * 1.5

3. 优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高。
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低

总结
- 页面中的所有样式将按照以下规则 "层叠" 为新的 "虚拟" 样式表，其中第一优先级最高：
  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式
- 行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

4. 选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器权重

继承或 * 0

标签选择器 1

(伪)类选择器 10

id选择器 100

行内样式 1000

!import 无穷大
复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和

选择器	权重
继承或 *	0
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000
!import	无穷大

群组选择器权重以每个选择器单独的权重为准，不进行相加计算

css 复制代码

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}

.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}

#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}