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>
外部样式看下列代码：
p{ color:blue;}
浏览器显示如下：为什么什么显示的不是蓝色？
显示还是红色，难道就是 内联样式>连接样式？接下来调换了调用的下位置。代码如下。
<style> p{ color:red;}</style><link rel="stylesheet" href="Noname1.css">
浏览器显示如下。
这样浏览器显示的却是蓝色，这时候我们就能看出个大概了。
优先就是个顺序解析问题，谁的引入样式在前面，后面的样式就会被覆盖前面的样式。也就是说，哪个样式离标签越近，哪个样式的优先就越高。
然后接下要解决的就是@import的问题了。
解释是这样：
第一种中，直接在style标签内容中使用。@import。
另开一个css样式文件，代码如下：
p{ color:yellow;}
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">
浏览器显示如下。
没有什么问题。还是一样，近水楼台先得月。。
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>
外部样式看下列代码：
p{ color:blue;}
浏览器显示如下：为什么什么显示的不是蓝色？
显示还是红色，难道就是 内联样式>连接样式？接下来调换了调用的下位置。代码如下。
<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样式文件，代码如下：
p{ color:yellow;}
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的优先级问题就请等下篇。
评论
发新帖
作者最近主题
相关贴子
- 班班超级向导——注册后引导用户上传头像、完善资料、关注好友/论坛/群组 DZ学习研究交流
- 分享帖子奖励积分 专业版3.9 DZ学习研究交流
- 城市门户2016 商业版-GBK DZ学习研究交流
- 微信文章自动采集器 V10.01.08 自动采集 - DZ学习研究交流 · 插件 专业开源[1314]
- 积分夺宝活动系统 商业版V1.1--------下载地址
- 申请 : 【西瓜】分类 商圈 优惠 更新
- 下载地址失效~请管理员更新~
- 糖堆/宽屏分享社区 商业版GBK+UTF8双版本(2015.6.2更新)（带商业版DIY）--------下...
- 申请 西瓜更新
- 仿iconfans官方模板 【商业版】X3.0 DZ学习研究交流
- 不错
- Mine视频解析 百度云使用方法
- 重大爆料[直通车] 【睿*淘宝运营精华课程视频】（不要外传我会死的很惨）
- 克米设计手机门户调试中
- [亮剑]幸运大转盘 黄金版DZ学习研究交流（首发+升级）
- 微信文章自动采集器 V10.01.05 自动采集 - DZ学习研究交流 · 插件 专业开源[1314]
- 已经补齐年费 费用请开通年费用户组！！！！！！
- 仁天际-PC模板管理 008 DZ学习研究交流 · 插件(站长窝魔方解密全网首发开放下载)
- [米米猫]QQ钻石 2.01 DX2.5商业插件完美奉献
- 请问遇到這中情况怎么办