当前位置：网站首页 > 文章教程 > 正文

css样式引入优先级?

yund56 2025-04-22 08:32 31 浏览

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

创建css样式表的三种方法

上一篇：CSS样式优先级怎样划分?【CSS优先级规则】
下一篇：零基础学习HTML之CSS篇样式优先权和字体样式与段落样式

css样式引入优先级?

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!