css样式引入优先级?
moboyou 2025-06-15 19:10 61 浏览
css中的优先级讲的有
1.选择器的优先级。
2.样式引入的优先级。
今天要研究的是样式引入的优先级。网上又很多答案都是如下的，但是真的是这样的吗，让我们来探一探究竟是如何。
四种样式的优先级别是：行内样式最高、
？优先级？ 内嵌样式>链接样式>导入样式？
在这四种的优先中，行内样式最高（内嵌样式），大家都是认可的。但剩下的3中就会是我们想的那样吗？
测试代码如下。很简单，先测试内联样式 。一段文本，给设置个color：red；红色。
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
p{color:red;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p>
</body>
</html>浏览器显示如下。没什么问题。
在接着来看看，用link的方式引入一个外部样式。
引入方式如下。
<link rel="stylesheet" href="Noname1.css">
<style>
p{ color:red;}
</style>外部样式看下列代码：
浏览器显示如下：为什么什么显示的不是蓝色？
显示还是红色，难道就是 内联样式>连接样式？接下来调换了调用的下位置。代码如下。
<style>
p{ color:red;}
</style>
<link rel="stylesheet" href="Noname1.css">浏览器显示如下。
这样浏览器显示的却是蓝色，这时候我们就能看出个大概了。
优先就是个顺序解析问题，谁的引入样式在前面，后面的样式就会被覆盖前面的样式。也就是说，哪个样式离标签越近，哪个样式的优先就越高。
然后接下要解决的就是@import的问题了。
解释是这样：
@import既可以为页面引入外部样式表，也可以在一个样式表中引入另一个样式表。
例如：
1.@import url("style.css");一个样式表中引入另一个样式表。
2.<style type="text/css">
@import "mytest/div+css/mytest.css";
</style>
也就是用style，或者是使用外部样式文件再去引入多个样式文件。
第一种中，直接在style标签内容中使用。@import。
另开一个css样式文件，代码如下：
html代码如下：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@import "Noname2.css";
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p>
</body>
</html>浏览器显示没有问题：
接着使用在使用link标签去测试优先级。
先放在前面。引入代码如下：
<link rel="stylesheet" href="Noname1.css">
<style>
@import "Noname2.css";
</style>浏览器显示看到的是还是上面讲到，谁越靠近p标签，就会采用谁的样式。有个词叫上面来着。近水楼台先得月。。。
在看看放在后面会如何。
<style>
@import "Noname2.css";
</style>
<link rel="stylesheet" href="Noname1.css">浏览器显示如下。
没有什么问题。还是一样，近水楼台先得月。。
四种样式的优先级别是：
行内样式最高、
内嵌样式 与 链接样式（哪个更靠近标签，哪个样式的优先级就越高）
导入样式？
@import的优先级问题就请等下篇。
相关推荐
- Excel技巧:SHEETSNA函数一键提取所有工作表名称批量生产目录
-
首先介绍一下此函数：SHEETSNAME函数用于获取工作表的名称，有三个可选参数。语法：=SHEETSNAME([参照区域],[结果方向],[工作表范围])（参照区域，可选。给出参照，只返回参照单元格...
- Excel HOUR函数:“小时”提取器_excel+hour函数提取器怎么用
-
一、函数概述HOUR函数是Excel中用于提取时间值小时部分的日期时间函数，返回0（12:00AM）到23（11:00PM）之间的整数。该函数在时间数据分析、考勤统计、日程安排等场景中应用广泛。语...
- Filter+Search信息管理不再难|多条件|模糊查找|Excel函数应用
-
原创版权所有介绍一个信息管理系统，要求可以实现:多条件、模糊查找，手动输入的内容能去空格。先看效果，如下图动画演示这样的一个效果要怎样实现呢？本文所用函数有Filter和Search。先用filter...
- FILTER函数介绍及经典用法12:FILTER+切片器的应用
-
EXCEL函数技巧：FILTER经典用法12。FILTER+切片器制作筛选按钮。FILTER的函数的经典用法12是用FILTER的函数和切片器制作一个筛选按钮。像左边的原始数据，右边想要制作一...
- office办公应用网站推荐_office办公软件大全
-
以下是针对Office办公应用（Word/Excel/PPT等）的免费学习网站推荐，涵盖官方教程、综合平台及垂直领域资源，适合不同学习需求：一、官方权威资源1.微软Office官方培训...
- WPS/Excel职场办公最常用的60个函数大全(含卡片)，效率翻倍!
-
办公最常用的60个函数大全：从入门到精通，效率翻倍！在职场中，WPS/Excel几乎是每个人都离不开的工具，而函数则是其灵魂。掌握常用的函数，不仅能大幅提升工作效率，还能让你在数据处理、报表分析、自动...
- 收藏|查找神器Xlookup全集|一篇就够|Excel函数|图解教程
-
原创版权所有全程图解，方便阅读，内容比较多，请先收藏！Xlookup是Vlookup的升级函数，解决了Vlookup的所有缺点，可以完全取代Vlookup，学完本文后你将可以应对所有的查找难题，内容...
- 批量查询快递总耗时?用Excel这个公式，自动计算揽收到签收天数
-
批量查询快递总耗时？用Excel这个公式，自动计算揽收到签收天数在电商运营、物流对账等工作中，经常需要统计快递“揽收到签收”的耗时——比如判断某快递公司是否符合“3天内送达”的服务承...
- Excel函数公式教程(490个实例详解)
-
Excel函数公式教程（490个实例详解）管理层的财务人员为什么那么厉害？就是因为他们精通excel技能！财务人员在日常工作中，经常会用到Excel财务函数公式，比如财务报表分析、工资核算、库存管理等...
- Excel(WPS表格)Tocol函数应用技巧案例解读，建议收藏备用!
-
工作中，经常需要从多个单元格区域中提取唯一值，如体育赛事报名信息中提取唯一的参赛者信息等，此时如果复制粘贴然后去重，效率就会很低。如果能合理利用Tocol函数，将会极大地提高工作效率。一、功能及语法结...
- Excel中的SCAN函数公式，把计算过程理清，你就会了
-
Excel新版本里面，除了出现非常好用的xlookup，Filter公式之外，还更新一批自定义函数，可以像写代码一样写公式其中SCAN函数公式，也非常强大，它是一个循环函数，今天来了解这个函数公式的计...
- Excel(WPS表格)中多列去重就用Tocol+Unique组合函数，简单高效
-
在数据的分析和处理中，“去重”一直是绕不开的话题，如果单列去重，可以使用Unique函数完成，如果多列去重，如下图：从数据信息中可以看到，每位参赛者参加了多项运动，如果想知道去重后的参赛者有多少人，该...
- Excel(WPS表格)函数Groupby，聚合统计，快速提高效率!
-
在前期的内容中，我们讲了很多的统计函数，如Sum系列、Average系列、Count系列、Rank系列等等……但如果用一个函数实现类似数据透视表的功能，就必须用Groupby函数，按指定字段进行聚合汇...
- Excel新版本，IFS函数公式，太强大了!
-
我们举一个工作实例，现在需要计算业务员的奖励数据，右边是公司的奖励标准：在新版本的函数公式出来之前，我们需要使用IF函数公式来解决1、IF函数公式IF函数公式由三个参数组成，IF(判断条件，对的时候返...
- Excel不用函数公式数据透视表，1秒完成多列项目汇总统计
-
如何将这里的多组数据进行汇总统计？每组数据当中一列是不同菜品，另一列就是该菜品的销售数量。如何进行汇总统计得到所有的菜品销售数量的求和、技术、平均、最大、最小值等数据？不用函数公式和数据透视表，一秒就...
- 一周热门
- 最近发表
-
- Excel技巧:SHEETSNA函数一键提取所有工作表名称批量生产目录
- Excel HOUR函数:“小时”提取器_excel+hour函数提取器怎么用
- Filter+Search信息管理不再难|多条件|模糊查找|Excel函数应用
- FILTER函数介绍及经典用法12:FILTER+切片器的应用
- office办公应用网站推荐_office办公软件大全
- WPS/Excel职场办公最常用的60个函数大全(含卡片)，效率翻倍!
- 收藏|查找神器Xlookup全集|一篇就够|Excel函数|图解教程
- 批量查询快递总耗时?用Excel这个公式，自动计算揽收到签收天数
- Excel函数公式教程(490个实例详解)
- Excel(WPS表格)Tocol函数应用技巧案例解读，建议收藏备用!
- 标签列表
-
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- css class选择器用法 (25)
- css样式引入 (30)
- css教程文字移动 (33)
- php简单源码 (36)
- php个人中心源码 (25)
- php小说爬取源码 (23)
- 云电脑app源码 (22)
- html画折线图 (24)
- docker好玩的应用 (28)
- linux有没有pe工具 (34)
- 可以上传视频的网站源码 (25)
- 随机函数如何生成小数点数字 (31)
- 随机函数excel公式总和不变30个数据随机 (33)
- 所有excel函数公式大全讲解 (22)
- 有动图演示excel函数公式大全讲解 (32)