CSS优先级及权重

最新推荐文章于 2023-01-06 16:59:33 发布

原创最新推荐文章于 2023-01-06 16:59:33 发布 · 343 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS样式的优先级规则，从内联样式到通配符选择器的权重顺序，并通过实例展示了不同选择器如何影响元素的显示。同时，强调了`!important`在样式覆盖中的特殊地位，及其在解决样式冲突时的角色。了解这些权重规则对于优化CSS代码和控制页面样式至关重要。

CSS样式优先级

内联样式（行内样式）> ID选择器 > 类 = 属性选择器 = 伪类 > 元属 > 通配符*

例子

在这里插入图片描述

此时优先作用的是行内样式

在这里插入图片描述

去掉行内样式，优先显示ID选择器

在这里插入图片描述

去掉ID选择器，优先显示class选择器

在这里插入图片描述

去掉class选择器,优先显示属性选择器，鼠标移到图片显示hover样式

在这里插入图片描述

去掉属性选择器，优先显示通配选择器

在这里插入图片描述

去掉通配符，显示元素属性

在这里插入图片描述

例外

`!important`作用的样式除外，被`!important`作用的样式会优先显示

CSS权重

!important Infinity
行内样式 1000
ID 100
class|属性|伪类 10
标签|伪元素 1
通配符 0

示例代码

<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>CSS权重问题</title>
    <style>
        /* 通用选择器 */
        * {
            width: 1000px;
        }

        /*  类选择器 */
        .img {
            width: 180px;
        }

        /* 属性选择器 */
        img {
            width: 400px;
        }

        /* 伪类选择器 */
        img:hover {
            width: 500px;
        }

        /* ID 选择器 */
        #img {
            width: 300px;
        }
    </style>
</head>

<body>
    <img width="1080"  class="img" id="img" src="./44444.jpg" alt="图片">
</body>