@import和link的区别中，权重优先级并不是@import＜link

最新推荐文章于 2023-05-27 19:51:40 发布

南极灬鲸落

最新推荐文章于 2023-05-27 19:51:40 发布

阅读量520

点赞数 1

文章标签： css html5

本文链接：https://blog.csdn.net/APTX911/article/details/120839074

版权

在网上的文章中@import和link的权重是link会优先于@import,我们先来看一下css的优先级：

!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

接下来我们先导入link的样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/text.css">

    <style>
        /* @import url("./css/text2.css"); */
    </style>
</head>
<body>
    <div></div>
    <!-- <link rel="stylesheet" href="./css/text.css"> -->
</body>
</html>

div {
    width: 200px;
    height: 200px;
    background-color: red;
}

现在是红色200px的正方形

把/* @import url("./css/text2.css"); */的注释取消，

div {
    width: 50px;
    height: 50px;
    background-color: blue;
}

变成50px 的小蓝正方形，接下来我们换一下他们俩的位置，让link在后，

然后又变成红色的200px正方形，说明link和@import没有什么权重区别，只是看谁把谁覆盖掉了。

南极灬鲸落

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
@import和link的区别中，权重优先级并不是@import＜link

在网上的文章中@import和link的权重是link会优先于@import,我们先来看一下css的优先级：!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符接下来我们先导入link的样式表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
复制链接

扫一扫