CSS基础

山月见光

于 2023-09-06 20:45:51 发布

阅读量482

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_58216564/article/details/132698260

版权

1 概念

1.1 介绍

CSS：层叠样式表(英文全称：Cascading Style Sheets)，是一种用于描述网页或文档样式的标记语言。它与 HTML（Hypertext Markup Language）一起被广泛用于网页设计和开发中。

层叠：多个样式可以作用在同一个html的元素上，同时生效

1.2 作用

CSS 的主要作用是为 HTML 或其他 XML（eXtensible Markup Language）文档提供样式和布局。使用 CSS，你可以定义文档的外观和风格，包括字体、颜色、大小、边距、背景等。

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

2 CSS的优势

分离样式和内容：CSS 允许将文档的样式与结构分离。通过将样式单独定义在 CSS 文件中，可以使 HTML 文档更加清晰、易于阅读和维护。同时，如果多个页面使用相同的样式，可以很方便地通过链接同一个外部样式表来实现样式的重用。
灵活性和可重用性：CSS 提供了丰富的选择器和样式属性，使得对元素的样式设计更加灵活和精确。可以轻松地对不同类型的元素应用样式，也可以根据不同的条件选择特定的元素进行样式修改。此外，通过引入外部样式表，可以在多个页面之间共享样式，实现样式的可重用性。
页面加载速度和性能优化：使用 CSS 可以将网页的样式信息集中管理，这样浏览器只需要下载一次样式文件即可。相比内联样式或内部样式表，外部样式表可以被浏览器缓存，从而减少数据传输量和页面加载时间，提高加载速度和用户体验。
响应式布局和移动优化：CSS 提供了强大的布局、定位和响应式设计功能。通过使用 CSS 媒体查询和弹性布局等技术，可以轻松实现适应不同设备尺寸和屏幕大小的响应式布局。这使得网页在不同的设备上都能够提供良好的用户体验，并优化移动设备上的显示效果。
可扩展性和维护性：CSS 具有层叠的特性，可以方便地进行样式的重用、继承和覆盖。这样，在修改样式时只需更新相应的 CSS 规则，而不需要逐个修改 HTML 元素。这提高了代码的可维护性，并减少了代码冗余。

3 CSS的使用

3.1 内联样式

在 HTML 元素的 style 属性中直接编写 CSS 样式。

语法：
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<p style="color: red; font-size: 16px;">这是一段红色且字号为 16 像素的文本。</p>

内联样式适用于只在当前元素中应用样式且不需要复用的情况。

3.2 内部样式表

在 HTML 文档的 <head> 标签中，使用 <style> 标签来定义 CSS 样式规则。

案例：
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一段红色且字号为 16 像素的文本。</p>
</body>

内部样式表适用于只在当前 HTML 文档中应用样式，但样式需要在多个元素之间共享的情况。

3.3 外部样式表

将 CSS 样式规则编写在一个独立的外部 CSS 文件中，然后通过 <link> 标签将其链接到 HTML 文档中。

3.3.1 提前定义css资源文件

lina.css文件，放在与html页面同级的css文件夹中：
div {
	color: red;
}

3.3.2 在head标签内，定义link标签引入外部样式文件。

html页面中的引入
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="css/lina.css" />
	</head>
	<body>
		<div>hello my css</div>
	</body>
</html>

外部样式表适用于在多个 HTML 文档中共享相同样式的情况。外部样式表提供了样式的重用性和可维护性，使得样式定义与内容分离。

3.4 区分

作用域的范围：外部样式表>内部样式表>行内样式表
优先级：外部样式表<内部样式表<行内样式表;
同样的样式作用在同一个标签身上：就近原则；
不同样式作用在同一个标签身上：叠加生效。

4 CSS语法

CSS 由选择器和声明块组成。

选择器 {
		属性1:值1;
		属性2:值2;
		...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。

选择器（Selectors）：选择器用于选择要应用样式的 HTML 元素。常见的选择器包括标签选择器（如 body、h1）、类选择器（以点.开头，如 .container）、ID 选择器（以井号#开头，如 #header）以及其他更复杂的选择器（如后代选择器、伪类选择器等）。选择器可以通过多种方式组合使用，以精确地定位要样式化的元素。
属性（Properties）：属性用于指定要设置的样式。每个属性对应一个样式特征，例如 color（文本颜色）、font-size（字体大小）、background-color（背景颜色）等。在 CSS 规则中，属性写在选择器后面，由冒号 : 分隔。
值（Values）：属性的值定义了样式的具体表现。不同的属性接受不同类型的值。例如，color 属性可以接受颜色名称（如 red）、十六进制颜色代码（如 #FF0000）或 RGB 颜色值（如 rgb(255, 0, 0)）。在 CSS 规则中，属性值写在冒号 : 后面，以分号 ; 结束。
CSS 规则集（Rule set）：CSS 规则集由选择器、属性和值组成，表示对应的样式定义。规则集通常包含在大括号 {} 中，并且可以包含多个属性声明。
注释（Comments）：注释用于在 CSS 代码中添加说明性信息，不会被浏览器解析为样式规则。CSS 的注释以 /* 开始，以 */ 结束。

5 基本选择器

筛选具有相似特征的元素

5.1 id选择器

ID 选择器用于通过元素的 ID 属性来选择元素。
在 HTML 中，ID 属性是唯一的，因此通过 ID 选择器可以准确地选中指定的元素。

作用：

选择具有相同id属性值的元素，建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

注意：

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
ID 选择器具有很高的特异性（specificity），意味着它们的权重较高，会覆盖其他选择器对同一元素的样式定义。因此，在使用 ID 选择器时，建议仅将其用于具有唯一标识的元素上，避免滥用。
虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

css文件

/*
选中 ID 属性值为 header 的元素，并将其文本颜色设置为红色。
*/
#header {
  color: red;
}

html文件

<!--
在 HTML 中，对应的元素可以使用以下方式定义 ID 属性
-->
<h1 id="header">Hello World</h1>

5.2 class选择器

类选择器（Class Selector）用于通过元素的 class 属性值来选择元素。
在 HTML 中，class 属性可以被多个元素共享，因此可以使用类选择器来选择具有相同 class 名称的元素。
在 CSS 中，使用类选择器时，需要在选择器前面加上 . 符号，后面跟上类名。

注意：

类名的第一个字符不能使用数字！ 它无法在 Mozilla 或 Firefox 中起作用。
类选择器可以被多个元素共享，因此当多个元素具有相同的类名时，样式规则会应用到所有对应的元素上。

css文件

/*
选中所有具有 class 属性值为 alert 的元素，并将其背景色设置为黄色。
*/
.alert {
  background-color: yellow;
}

html文件

<!--
在 HTML 中，对应的元素可以使用以下方式定义 class 属性
-->
<p class="alert">This is an alert message.</p>
<div class="alert">Warning: Something went wrong!</div>

除了单个类名选择之外，还可以同时使用多个类名进行选择。只需将多个类名连续写在一起，没有空格。

.highlight.bold {
  color: red;
  font-weight: bold;
}

5.3 元素选择器/标签选择器

元素选择器（或称为标签选择器）是 CSS 中最基本的选择器之一，通过 HTML 标签名来选择元素并应用样式。
使用元素选择器时，只需使用标签名作为选择器即可。

选择具有相同标签名称的元素。
定义选择器语法：标签名称{}
使用标签选择器：自动使用在所有的同名的标签上

注意：

标签名称必须是html提供好的标签。
元素选择器的特异性较低，意味着其他类型的选择器（如类选择器、ID 选择器）的优先级更高。因此，在设计样式时，可以根据需要组合使用不同类型的选择器，以实现更精确的样式控制。

css文件

/*
为所有的段落元素 <p> 设置文本颜色为红色
*/
p {
  color: red;
}

html文件

<!--
在 HTML 中，对应的元素可以使用以下方式定义标签名
-->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

5.4 通配符选择器

用 * 符号来表示，匹配所有元素。

/*
将所有元素的外边距和内边距都设置为 0
*/
* {
  margin: 0;
  padding: 0;
}

5.5 属性选择器

通过元素的属性值来选择元素。属性选择器有多种形式

[attribute] 选中具有指定属性的元素
[attribute=value] 选中具有指定属性和属性值的元素
[attribute*=value] 选中具有包含指定字符串的属性值的元素
[attribute^=value] 选中具有以指定字符串开头的属性值的元素
[attribute$=value] 选中具有以指定字符串结尾的属性值的元素

/*
选中所有类型为 text 的 <input> 元素，并将其边框设为灰色
*/
input[type="text"] {
  border: 1px solid gray;
}

6 优先级

6.1 选择器的优先级

ID选择器 > 类选择器 > 标签选择器
当存在多个选择器具有相同优先级时，后面的规则会覆盖前面的规则。
当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

6.2 样式表的优先级

行内样式 > 内部样式 >外部样式
同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

7 CSS常用样式

7.1 color :字体颜色

color 属性用于设置文本的颜色。
可以使用预定义的颜色名称或使用十六进制、RGB 或 HSL 值来指定颜色。

7.1.1 使用预定义的颜色名称

color: red;  /* 红色 */
color: green;  /* 绿色 */
color: blue;  /* 蓝色 */

7.1.2 使用十六进制值

color: #ff0000;  /* 红色 */
color: #00ff00;  /* 绿色 */
color: #0000ff;  /* 蓝色 */

7.1.3 使用 RGB 值

color: rgb(255, 0, 0);  /* 红色 */
color: rgb(0, 255, 0);  /* 绿色 */
color: rgb(0, 0, 255);  /* 蓝色 */

7.1.4 使用 HSL 值

color: hsl(0, 100%, 50%);  /* 红色 */
color: hsl(120, 100%, 50%);  /* 绿色 */
color: hsl(240, 100%, 50%);  /* 蓝色 */

7.2 width height:宽高

width 和 height 是用于设置元素的宽度和高度的 CSS 属性。

只有块状元素可以设置宽高，行级元素设置不生效。

7.2.1 使用像素（px）作为单位

width: 200px;  /* 宽度为 200 像素 */
height: 100px;  /* 高度为 100 像素 */

7.2.2 使用百分比（%）相对于父元素的宽度或高度

width: 50%;  /* 宽度为父元素宽度的 50% */
height: 75%;  /* 高度为父元素高度的 75% */

7.2.3 使用视窗单位（vw 和 vh）相对于视窗的宽度或高度

width: 50vw;  /* 宽度为视窗宽度的 50% */
height: 25vh;  /* 高度为视窗高度的 25% */

7.2.4 使用自动（auto）根据内容或布局自动确定宽度或高度

width: auto;  /* 根据内容或布局自动确定宽度 */
height: auto;  /* 根据内容或布局自动确定高度 */

7.3 背景样式

背景样式是用于设置元素的背景的 CSS 属性，包括背景颜色、背景图片、背景大小等。

7.3.1 设置背景颜色

background-color: #ffffff;  /* 设置背景颜色为白色 */
background-color: rgba(255, 0, 0, 0.5);  /* 设置带有透明度的背景颜色 */

7.3.2 设置背景图片

background-image: url("image.jpg");  /* 设置背景图片为 image.jpg */
background-image: url("image.png"), url("pattern.png");  /* 设置多个背景图片，按顺序叠加显示 */

7.3.3 设置背景大小和重复方式

background-size: cover;  /* 背景图片按比例缩放填充整个元素 */
background-size: contain;  /* 背景图片按比例缩放，保持完整显示在元素内部 */
background-repeat: no-repeat;  /* 背景图片不重复 */
background-repeat: repeat-x;  /* 背景图片在水平方向上重复 */
background-repeat: repeat-y;  /* 背景图片在垂直方向上重复 */

7.3.4 设置背景位置

background-position: center;  /* 背景图片居中对齐 */
background-position: top right;  /* 背景图片在右上角对齐 */
background-position: 50% 25%;  /* 背景图片在水平方向上居中，垂直方向上偏移 25% */

7.4 文本样式

文本样式是用于设置文本的外观和格式的 CSS 属性，包括字体、颜色、大小、对齐方式等。

7.4.1 设置字体族

font-family: Arial, Helvetica, sans-serif;  /* 设置字体为 Arial，如果不可用则使用 Helvetica，最后使用 sans-serif 字体作为备选 */

7.4.2 设置字体大小

font-size: 16px;  /* 设置字体大小为 16 像素 */

7.4.3 设置字体粗细

font-weight: bold;  /* 设置字体粗体 */
font-weight: normal;  /* 设置字体常规（非粗体） */

7.4.4 设置字体样式（斜体、下划线等）

font-style: italic;  /* 设置字体为斜体 */
text-decoration: underline;  /* 为文本添加下划线 */

7.4.5 设置文本颜色

color: #ff0000;  /* 设置文本颜色为红色 */

7.4.6 设置文本对齐方式

text-align: center;  /* 设置文本水平居中对齐 */
text-align: left;  /* 设置文本左对齐 */
text-align: right;  /* 设置文本右对齐 */

7.4.7 设置行高

line-height: 1.5;  /* 设置行高为当前字体大小的 1.5 倍 */

7.4.8 设置字母间距

letter-spacing: 2px;  /* 设置字母间距为 2 像素 */

7.5 列表样式

列表样式是用于设置无序列表（<ul>）和有序列表（<ol>）的外观和格式的 CSS 属性。

7.5.1 设置无序列表样式

list-style-type: disc;  /* 使用实心圆点作为列表项标记（默认样式） */
list-style-type: circle;  /* 使用空心圆圈作为列表项标记 */
list-style-type: square;  /* 使用实心方块作为列表项标记 */
list-style-type: none;  /* 隐藏列表项标记 */

7.5.2 设置有序列表样式

list-style-type: decimal;  /* 使用十进制数字（默认样式） */
list-style-type: lower-roman;  /* 使用小写罗马数字作为列表项标记 */
list-style-type: upper-roman;  /* 使用大写罗马数字作为列表项标记 */
list-style-type: lower-alpha;  /* 使用小写字母作为列表项标记 */
list-style-type: upper-alpha;  /* 使用大写字母作为列表项标记 */

7.5.3 设置自定义图像作为列表项标记

list-style-image: url("image.jpg");  /* 使用图片 image.jpg 作为列表项标记 */

7.5.4 控制列表项标记的对齐方式

list-style-position: inside;  /* 列表项标记在列表项内部对齐 */
list-style-position: outside;  /* 列表项标记在列表项外部对齐（默认样式） */

7.6 边框样式

边框样式是用于设置 HTML 元素的边框外观和样式的 CSS 属性。
可以通过设置边框宽度、边框颜色和边框类型来定义元素的边框样式。

7.6.1 设置边框宽度

border-width: 1px;  /* 设置边框宽度为 1 像素 */

7.6.2 设置边框颜色

border-color: #000000;  /* 设置边框颜色为黑色 */

7.6.3 设置边框类型

border-style: solid;  /* 设置实线边框 */
border-style: dashed;  /* 设置虚线边框 */
border-style: dotted;  /* 设置点线边框 */
border-style: double;  /* 设置双线边框 */
border-style: none;  /* 没有边框 */

7.6.4 设置所有边框属性的缩写形式

border: 1px solid #000000;  /* 设置边框宽度为 1 像素、边框样式为实线、边框颜色为黑色 */

7.6.5 设置单独的边框属性（上、右、下、左）

border-top: 1px solid #000000;  /* 设置上边框样式 */
border-right: 1px solid #000000;  /* 设置右边框样式 */
border-bottom: 1px solid #000000;  /* 设置下边框样式 */
border-left: 1px solid #000000;  /* 设置左边框样式 */

8 盒子模型

概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型说明图：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

8.2 盒子的宽度和高度

元素的实际宽度和高度：

当我们计算一个元素实际在页面占有的总宽度计算公式是这样的：

总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

8.3 设置的宽度直接就是元素的实际宽度，通过box-sizing属性

9 float 浮动

9.1 概念

float 是 CSS 中的一个属性，用于控制元素在页面中的浮动位置。

当你将一个元素设置为 float 属性时，它会脱离正常文档流，向左或向右浮动到其容器中。其他内容则会围绕着浮动元素进行布局。浮动元素会尽可能地占据容器的空间，并向其中靠拢。

9.2 元素的浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

9.3 浮动的使用

9.3.1 float 属性

float: left;：将元素向左浮动，其他内容会围绕在它的右侧。
float: right;：将元素向右浮动，其他内容会围绕在它的左侧。

9.3.2 注意

浮动元素会破坏正常的文档流，可能会导致容器塌陷（容器无法自动撑开高度）的问题，这时可能需要清除浮动。
使用浮动后，需要注意元素的父容器是否具有适当的清除浮动样式，以避免布局问题。
在一些情况下，浮动可能会导致元素重叠或覆盖其他元素，这时可能需要通过调整 z-index 属性或使用清除浮动的技术来解决。

9.3.3 演示

通过设置 float: left; 将 .box 元素向左浮动，形成一个红色的浮动块。而 <p> 元素则围绕在浮动元素的右侧进行布局。

<style>
  .box {
    float: left;
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>

<div class="box"></div>
<p>这是浮动元素周围的文本内容。</p>

9.4 clear–清除浮动

clear 属性用于清除浮动元素对其后面内容布局的影响，使得后续元素不会环绕在浮动元素的周围。

9.4.1 属性取值

clear: none;：默认值，表示不清除浮动。
clear: left;：清除左侧的浮动元素对当前元素的影响。
clear: right;：清除右侧的浮动元素对当前元素的影响。
clear: both;：清除左右两侧的浮动元素对当前元素的影响，使得当前元素在浮动元素下方单独显示。

9.4.2 演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动</title>
		<style>
			div{
				width: 400px;
				height: 200px;
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<!--没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示
			浮动的元素都脱离了常规文档流；
			为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层
			如果想要非浮动元素不受浮动元素的影响，需要使用clear属性
		-->
		<div style="background: rgba(255,0,0,0.5); float: left;">
			div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
		</div>
		<div style="background: lawngreen; width: 600px; height: 350px; ">
			div2-未浮动，常规文档流,
			<br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响
			如果不想让div2被浮动元素影响，需要添加clear属性。
			添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，大家可以自己试验一下
		</div>
		<div style="background: lightblue; float: right; width: 1800px;">
			div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动
		</div>
		<div style="background: lightcoral; width: 600px; height: 350px; ">
			div4-未浮动，常规文档流,
			<br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响
			如果不想让div4被浮动元素影响，需要添加clear属性。
			添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，大家可以自己试验一下
			
			clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
		</div>
		<div style="background: lavender;">
			div5-未浮动，常规文档流,
		</div>
	</body>
</html>

10 overflow

overflow 属性用于控制内容溢出容器时的处理方式。
它可以应用于包含块级元素的容器，具体效果取决于属性的取值。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

注意：

overflow 属性只工作于指定高度的块元素上。
在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

11 Display(显示) 与 Visibility（可见性）

display 属性和 visibility 属性都用于控制元素在网页中的显示方式

11.1 display

display 属性控制元素在布局中占据的空间以及元素的显示方式。
修改 display 属性会改变元素的布局，并且可能影响相邻元素的位置。

值	描述
display: block;	元素将被显示为块级元素，会独占一行并撑满其父容器的宽度。
display: inline;	元素将被显示为内联元素，不会独占一行，宽度由内容决定。
display: inline-block;	元素将被显示为内联块级元素，不会独占一行，可以设置宽度、高度等属性。
display: none;	元素将被隐藏，不会在页面上占据空间，无法与其交互。

11.2 visibility

visibility 属性控制元素的可见性。
修改 visibility 属性不会改变元素的布局，元素仍然占据原来的空间，只是其可见性发生变化。

值	描述
visibility: visible;	元素是可见的，默认值。
visibility: hidden;	元素是隐藏的，但仍然占据在布局中的位置。
visibility: collapse;	仅适用于表格相关元素，元素被隐藏，且表格的布局会进行调整。

12 复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。
可以更准确更精细的选择目标元素标签。

12.1 并集选择器

并集选择器（Union Selector）是CSS中的一种选择器，它可以选择同时满足多个选择器条件的元素。

并集选择器使用逗号（,）将多个选择器组合在一起，它选取了满足任意一个选择器条件的所有元素。

/*通过并集选择器 .button, .link，同时选择带有 class 为 "button" 和 "link" 的元素，并将它们的文本颜色设置为红色并加粗显示
*/
<style>
  /* 选择所有带有 class 为 "button" 的元素和所有带有 class 为 "link" 的元素 */
  .button, .link {
    color: red;
    font-weight: bold;
  }
</style>

<p class="button">这是一个按钮</p>
<a class="link" href="#">这是一个链接</a>

12.2 交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

/*
通过 .button.special 这个选择器，选择同时具有 class 为 "button" 和 "special" 的按钮元素，并将其背景颜色设为红色，文字颜色设为白色
*/
<style>
  /* 选择同时具有 class 为 "button" 和 "special" 的元素 */
  .button.special {
    background-color: red;
    color: white;
  }
</style>

<button class="button special">特殊按钮</button>

12.3 后代选择器

后代选择器（Descendant Selector）是CSS中的一种选择器，它可以选择指定元素的所有后代元素。

后代选择器使用空格（）来表示选择器之间的关系。它会匹配在指定元素内的所有后代元素，无论是子元素、孙子元素还是更深层次的后代元素。

/*
通过后代选择器 ul li，选择 <ul> 元素内的所有 <li> 元素，并将它们的文本颜色设置为蓝色
*/
<style>
  /* 选择 <ul> 元素内的所有 <li> 元素 */
  ul li {
    color: blue;
  }
</style>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

12.4 子元素选择器

子元素选择器（Child Selector）是CSS中的一种选择器，用于选择指定元素的直接子元素。

子元素选择器使用大于号（>）表示选择器之间的关系。它只会匹配指定元素的直接子元素，而不会匹配更深层次的后代元素。

/*
通过子元素选择器 ul > li，选择 <ul> 元素下的直接子元素 <li> 元素，并将它们的文本颜色设置为蓝色。
注意，在这个选择器中，嵌套在第三个 <li> 中的 <li> 元素并没有被选择，因为它们不是直接子元素。
*/
<style>
  /* 选择 <ul> 元素下的直接子元素 <li> 元素 */
  ul > li {
    color: blue;
  }
</style>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>
    列表项3
    <ul>
      <li>嵌套列表项A</li>
      <li>嵌套列表项B</li>
    </ul>
  </li>
</ul>

12.5 伪类选择器

伪类选择器（Pseudo-class Selector）是CSS中的一种选择器，用于选择具有特殊状态的元素。它可以针对链接、表单、鼠标事件等动态变化的样式进行设置。

伪类选择器使用冒号（:）表示选择器之间的关系。它一般用于根据元素的状态或行为来选择元素，例如选择鼠标悬停时的元素、选择被点击时的元素等。

值	描述
:hover	选择鼠标悬停在上面的元素。
:active	选择被鼠标点击的元素。
:focus	选择获取焦点的元素，例如表单中的输入框。
:nth-child(n)	选择第 n 个子元素，其中 n 是一个数字，可以使用不同的表达式进行计算。
:first-child 和 :last-child	选择第一个和最后一个子元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style>			
			/*链接伪类选择器*/			
			a:link{
				color: red;/*默认颜色是红色*/	
			}
			a:visited{
				color: blue;/*访问过的页面是蓝色*/	
			}
			a:hover{
				color: green;/*鼠标悬浮是绿色*/	
				font-size: 28px;
			}
			a:active{
				color: gold;/*按下鼠标不放手是金色*/	
				font-family: "微软雅黑";
			}
		</style>
		
	</head>
	<body>
		<a href="03-常用样式.html" target="_blank">常用样式</a>
		<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
		<a href="05-综合练习.html" target="_blank">综合练习</a>
	</body>
</html>

注意

写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

12.6 复合选择器比对

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是 > .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法