span标签style的优先级_css样式引入优先级？

css中的优先级讲的有

1.选择器的优先级。

2.样式引入的优先级。

今天要研究的是样式引入的优先级。网上又很多答案都是如下的，但是真的是这样的吗，让我们来探一探究竟是如何。

四种样式的优先级别是：行内样式最高、

？优先级？  内嵌样式>链接样式>导入样式？

在这四种的优先中，行内样式最高(内嵌样式)，大家都是认可的。但剩下的3中就会是我们想的那样吗？

测试代码如下。很简单，先测试内联样式　。一段文本，给设置个color：red；红色。

无标题文档

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?

浏览器显示如下。没什么问题。

在接着来看看，用link的方式引入一个外部样式。

引入方式如下。

外部样式看下列代码：

p{

color:blue;

}

浏览器显示如下：为什么什么显示的不是蓝色？

显示还是红色，难道就是  内联样式>连接样式？接下来调换了调用的下位置。代码如下。

浏览器显示如下。

这样浏览器显示的却是蓝色，这时候我们就能看出个大概了。

优先就是个顺序解析问题，谁的引入样式在前面，后面的样式就会被覆盖前面的样式。也就是说，哪个样式离标签越近，哪个样式的优先就越高。

然后接下要解决的就是@import的问题了。

解释是这样：

@import既可以为页面引入外部样式表，也可以在一个样式表中引入另一个样式表。

例如：

1.@import url("style.css");一个样式表中引入另一个样式表。

2.

@import "mytest/div+css/mytest.css";

也就是用style，或者是使用外部样式文件再去引入多个样式文件。

第一种中，直接在style标签内容中使用。@import。

另开一个css样式文件，代码如下：

p{

color:yellow;

}

html代码如下：

无标题文档

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?

浏览器显示没有问题：

接着使用在使用link标签去测试优先级。

先放在前面。引入代码如下：

浏览器显示看到的是还是上面讲到，谁越靠近p标签，就会采用谁的样式。有个词叫上面来着。近水楼台先得月。。。

在看看放在后面会如何。

浏览器显示如下。

没有什么问题。还是一样，近水楼台先得月。。

四种样式的优先级别是：

行内样式最高、

内嵌样式  与  链接样式(哪个更靠近标签，哪个样式的优先级就越高)

导入样式？

@import的优先级问题就请等下篇。