CSS样式表和选择器
本文主要内容
- CSS 概述
- CSS 和 HTML 结合的三种方式：行内样式表、内嵌样式表、外部样式表
- CSS 四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器
- CSS 几种扩展选择器：后代选择器、交集选择器、并集选择器
- CSS 样式优先级
前言
CSS 概述
CSS: Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。
css 的最新版本是 css3，我们目前学习的是 css2.1。因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。
接下来我们要讲一下为什么要使用 CSS。
HTML 的缺陷：
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS 优点：
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了
总结：
CSS 的出现，解决了 HTML 的缺陷。
CSS 和 HTML 结合的三种方式
CSS 和 HTML 结合的三种方式如下：
- 行内样式表（行内式）：在标签内部使用 style 属性
- 内嵌样式表（内联式）：在 head 标签内部使用
<style>标签 - 外部样式表（外链式）：在 head 标签内部使用
<link>标签引入外部 CSS 文件
1. 行内样式表（行内式）
<div style="color: red; font-size: 20px;">这是一个div标签</div>行内式的特点：
- 样式作用于当前标签
- 优先级最高
- 适合于修改简单样式
- 不能实现样式复用，不推荐使用
2. 内嵌样式表（内联式）
<head>
<style type="text/css">
div {
color: red;
font-size: 20px;
}
</style>
</head>内联式的特点：
- 样式作用于当前整个页面
- 可以实现样式复用
- 没有实现结构与样式完全分离
3. 外部样式表（外链式）
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>外链式的特点：
- 样式作用于所有引入该样式表的页面
- 实现了结构与样式完全分离
- 可以实现样式复用
- 便于后期维护
- 推荐使用
CSS 四种基本选择器
CSS 选择器用于选择要添加样式的 HTML 元素。
1. 标签选择器
标签选择器是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
div {
color: red;
font-size: 20px;
}标签选择器的特点：
- 选择的是页面上所有的该种标签
- 无法实现差异化设置
2. 类选择器
类选择器使用 . 号，后面紧跟类名，类名可以由字母、数字、下划线、中划线组成，但不能以数字或中划线开头。
.box {
color: red;
font-size: 20px;
}<div class="box">这是一个div标签</div>类选择器的特点：
- 可以为元素对象定义单独或相同的样式
- 可以为一个元素同时设置多个类名，类名之间用空格隔开
- 类名不能以数字开头
3. ID 选择器
ID 选择器使用 # 号，后面紧跟 ID 名，ID 名可以由字母、数字、下划线、中划线组成，但不能以数字或中划线开头。
#box {
color: red;
font-size: 20px;
}<div id="box">这是一个div标签</div>ID 选择器的特点：
- ID 在一个页面中是唯一的，不能重复
- 一个元素只能有一个 ID
- ID 选择器的优先级高于类选择器
4. 通用选择器
通用选择器使用 * 号，匹配页面中所有的元素。
* {
margin: 0;
padding: 0;
}通用选择器的特点：
- 匹配页面中所有的元素
- 一般用于清除页面中所有元素的默认边距
CSS 几种扩展选择器
1. 后代选择器
后代选择器用于选择某元素的后代元素，使用空格分隔。
div p {
color: red;
}上面的代码表示选择 div 元素内部的所有 p 元素。
后代选择器的特点：
- 后代选择器可以是标签名、类名、ID 名
- 后代选择器可以有多个，用空格分隔
- 后代选择器不一定是直接子元素，可以是任意后代元素
2. 交集选择器
交集选择器由两个选择器直接连接构成，表示既满足第一个选择器，又满足第二个选择器的元素。
div.box {
color: red;
}上面的代码表示选择既是 div 元素，又有 box 类名的元素。
交集选择器的特点：
- 交集选择器中如果有标签选择器，标签选择器必须在最前面
- 交集选择器中的选择器之间没有任何连接符号
3. 并集选择器
并集选择器（分组选择器）是各个选择器通过逗号连接而成，表示多个选择器共同应用相同的样式。
div, p, .box {
color: red;
}上面的代码表示选择所有的 div 元素、p 元素和有 box 类名的元素。
并集选择器的特点：
- 并集选择器中的选择器之间用逗号分隔
- 并集选择器通常用于集体声明
CSS 样式优先级
CSS 样式优先级是指当多个选择器作用于同一个元素时，最终应用哪个选择器的样式。
选择器优先级
选择器的优先级按照以下规则计算：
- 行内样式：1000
- ID 选择器：100
- 类选择器、属性选择器、伪类选择器：10
- 标签选择器、伪元素选择器：1
- 通用选择器、子选择器、相邻选择器：0
优先级的计算方法是将选择器中的各种选择器的优先级值相加，值越大优先级越高。
例如：
#box .item p {
color: red;
}上面选择器的优先级计算为：100 + 10 + 1 = 111。
优先级的特殊情况
- 如果优先级相同，则后面的样式会覆盖前面的样式。
- 如果在样式后面添加
!important，则该样式的优先级最高，会覆盖所有其他样式。
p {
color: red !important;
}继承的优先级
继承的样式优先级最低，即使是通用选择器的优先级也比继承的优先级高。
总结
本文介绍了 CSS 的概述、CSS 和 HTML 结合的三种方式、CSS 四种基本选择器、CSS 几种扩展选择器以及 CSS 样式优先级。
在实际开发中，我们需要根据需求选择合适的选择器和样式表方式，以实现页面的美观和代码的可维护性。同时，也需要注意样式的优先级，避免出现样式冲突的问题。