css 各类选择器优先性

最新推荐文章于 2024-02-28 21:36:57 发布

猿带码

最新推荐文章于 2024-02-28 21:36:57 发布

阅读量124

点赞数

分类专栏： web css

本文链接：https://blog.csdn.net/wjx25zj/article/details/104293112

版权

web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

网上看到很多关于选择器优先级问题。

主要存疑在 伪类选择器 类选择器 属性选择器

于是做了如下实验；

得出结果

!important > 行内样式 > ID选择器 > 伪类选择器 > 类选择器 > 标签 > 属性选择器 > 通配符 > 继承 > 浏览器默认属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        h4 {
            color: blue !important;
        }
        * {
            margin: 0;
            padding: 0;
            color: orange;
        }

        #text {
            color: red;
        }

        [title] {
            color: brown;
        }

        div {
            color: blue;
        }

        p:nth-child(4),
        p:nth-child(5) {
            color: aqua;
        }

        .text {
            color: green;
        }


    </style>
</head>

<body>
    <h1> !important > 行内样式 > ID选择器 > 伪类选择器 > 类选择器 > 标签 > 属性选择器 > 通配符 > 继承 > 浏览器默认属性</h1>
    <h4 style="color:gray">
        important(blue) > 行内
    </h4>
    <p id="text" style="color:gray">
        行内(gray) > id
    </p>
    <p id="text">
        id(red) > 伪类选择器aqua </p>

    <p class="text">
        伪类选择器aqua> class
    </p>
    <p class="text" title="1">
        类选择器green > 属性选择器brown
    </p>
    <div title="1">
        属性选择器brown > 标签
    </div>
</body>

</html>

猿带码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 各类选择器优先性

网上看到很多关于选择器优先级问题。主要存疑在伪类选择器类选择器属性选择器于是做了如下实验；得出结果!important > 行内样式 > ID选择器 > 伪类选择器 > 类选择器 > 标签 > 属性选择器 > 通配符 > 继承 > 浏览器默认属性<!DOCTYPE html><html la...
复制链接

扫一扫

专栏目录