CSS样式表快速入门之三种样式来源及选择器优先级解决方案 - CSS基础知识

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > CSS样式表快速入门之三种样式来源及选择器优先级解决方案

博主信息

博文 6

粉丝 0

访问量 11139

专题推荐

更多>

样式表的三种来源及示例

外部引入公共样式

语法：<link rel="stylesheet" href="引入的样式地址">
说明：一般放在网页的<head>……</head>标签中
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式表来源</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    ……
</body>
</html>

在当前文档中

语法：<style>……</style>
说明：
1. 一般放在网页的<head>……</head>标签中
2. 具体的样式需要写在<style>……</style>标签中
示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样式表来源</title>
    <style>
      .love {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p class="love">我喜欢CSS</p>
  </body>
</html>

行内样式(当前元素的属性)

语法：style="具体的样式写在这里"
说明：直接在对应的标签内写上对应的样式即可
示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样式表来源</title>
  </head>
  <body>
    <p style="color: red; font-size: 20px">我喜欢CSS</p>
  </body>
</html>

CSS 优先级冲突的解决方案

样式表的来源优先级

规则：外部引用 < 文档中引用 < 行内引用
冲突解决方案：
1. 把多个文档都适用的公共的样式表通过外部引用的方法进行使用
2. 把当前文档中多个元素公用的样式写在当前文档的样式（<style>……</style>）中
3. 把某一个元素特有的样式在其行内样式标签中style="..."使用

选择器的优先级及其冲突解决方案

选择器的优先级：id > class > tag
选择器的优先级解决方案规则：
- 只有 tag 便签的情况下，tag 的数量越多，就越优先
- 只有 class 的情况下，class 的数量越多，就越优先
- 只有 id 的情况下，id 的数量越多，就越优先
- 有两个或两个以上的选择器时，id 的优先级最高，其次是 class，最后是 tag
  
  使用技巧：两组选择器都对应同一元素时，判断哪一组的优先级别最高，可以先分别统计出每一组选择器具体包含多少个 id、class 和 tag，然后就可以根据上面的解决方案来做出判断了

示例 1：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样式表来源</title>
    <style>
      p {
        color: blanchedalmond;
        font-size: 10px;
      }
      p.love {
        color: blue;
        font-size: 50px;
      }
      main p.love {
        color: rgb(0, 255, 119);
        font-size: 30px;
      }
      div main p.love {
        color: rgb(80, 27, 194);
        font-size: 40px;
      }
      #lv {
        color: rgb(75, 54, 104);
        font-size: 60px;
      }
      div main p#lv {
        color: rgb(19, 226, 157);
        font-size: 80px;
      }
      .love {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <main>
        <p class="love" id="lv">我喜欢CSS</p>
      </main>
    </div>
  </body>
</html>

分析：上面的代码中，一共出现了七组选择器样式，最终的样式到底以哪一组为准呢？我们具体来看:

编号	选择器	id	class	tag	标识	优先级别
1	`p`	0	0	1	`0,0,1`	7
2	`p.love`	0	1	1	`0,1,1`	5
3	`main p.love`	0	1	2	`0,1,2`	4
4	`div main p.love`	0	1	3	`0,1,3`	3
5	`#lv`	1	0	0	`1,0,0`	2
6	`div main p#lv`	1	0	3	`1,0,3`	1
7	`.love`	0	0	1	`0,1,0`	6

说明：按照上面所说的选择器的优先级解决方案规则，我们对上面七组选择器先进行统计，按照“同类型看数量(数量越多，级别越高)，不同类型看优先级(id>class>tag)”的原则来判断即可，最终我们得出结论：编号为6的这一组(div main p#lv)选择器的级别是最高的，其次是编号为5的这一组(#lv)级别是第二高的，以此类推，编号为1的这一组(p)级别是最低的。

-最终显示ide效果如下所示(div main p#lv优先级最高，故最终以它为准)：

源码的顺序

规则：同等级别下，后面出现的样式会覆盖前面的样式
示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>样式表来源</title>
    <style>
      .love {
        color: red;
        font-size: 20px;
      }
      .love {
        color: blue;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p class="love">我喜欢CSS</p>
  </body>
</html>