css样式引入优先级?

Posted webHonor

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css样式引入优先级?相关的知识,希望对你有一定的参考价值。

 

 

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的优先级问题就请等下篇。

 

以上是关于css样式引入优先级?的主要内容,如果未能解决你的问题,请参考以下文章

CSSCSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

选择器优先级 与 4中引入样式方式

CSS复习笔记引入和语法

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)

前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

在HTML中使用CSS样式的几种方式