CSS优先级

最新推荐文章于 2024-09-07 19:05:57 发布

wz0113

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量61

点赞数

分类专栏：我的笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/wz0113/article/details/121892300

版权

我的笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS样式优先级的规则，包括导入方式、选择器权重和权值计算。内容涵盖内联样式、ID选择器、类选择器和标签选择器的优先级，并通过实例展示了它们的组合使用。同时，解释了`!important`的优先级以及继承的权值。通过对这些概念的理解，读者能够更好地控制和调试CSS样式表。

摘要由CSDN通过智能技术生成

CSS优先级

1、导入方式的优先级

内联式 > 嵌入式 > 外部式
说明：嵌入式放外部式的后面时才是如此，比如：

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>

2、选择器的优先级

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css3选择器优先级</title>
    <style type="text/css">
        #my_id {
            color: #0000ff;
        }
        .my_class {
            color: #00ff00;
        }
        div {
            color: #ff0000;
        }
        * {
            color: #30033;
        }
    </style>
</head>

<body>
    <div id="my_id" class="my_class" style="color:#cccccc">
        我是一个div
    </div>
</body>

</html>

3、权值

权值规则标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

#a .b p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

最高权值!import

p{color:purple!important;}

!important位于属性值之后，";"之前。

wz0113

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS优先级

CSS三种导入的优先级内联式 > 嵌入式 > 外部式说明：嵌入式放外部式的后面时才是如此，比如：<link href="style.css" rel="stylesheet" type="text/css"><style type="text/css"></style>
复制链接

扫一扫