CSS优先级及权重

最新推荐文章于 2025-05-07 09:11:09 发布

一只抠代码的汪

最新推荐文章于 2025-05-07 09:11:09 发布

阅读量315

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/wangwangwang21/article/details/115448589

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

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>