css权重

最新推荐文章于 2024-03-02 20:19:18 发布

UNDERCOVERj

最新推荐文章于 2024-03-02 20:19:18 发布

阅读量304

点赞数

分类专栏： html-css 文章标签： css

本文链接：https://blog.csdn.net/github_37037281/article/details/55506985

版权

html-css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
如果权重一样，就采用覆盖方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #content div#main-content h2{
                color:red;
            }
            /*100+1+100+1=202*/
            #content #main-content>h2{
                color:blue
            }
            /*100+100+1=201*/
            body #content div[id="main-content"] h2{
                color:green;
            }
            /*1+100+1+10+1=113*/
            #main-content div.paragraph h2{
                color:orange;
            }
            /*100+1+10+1=112*/
            #main-content [class="paragraph"] h2{
                color:yellow;
            }
            /*100+10+1=111*/
            div#main-content div.paragraph h2.first{
                color:pink;
            }
            /*1+100+1+10+1+10=123*/
            .red{color: red;background: black}
            .blue{color:blue;}

        </style>
        <!-- 4个等级的定义如下：
        第一等：代表内联样式，如: style=””，权值为1000。
        第二等：代表ID选择器，如：#content，权值为100。
        第三等：代表类，伪类和属性选择器，如.content，权值为10。
        第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
        通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
        如果权重一样，就采用覆盖方式
         -->
    </head>
    <body>
    <div id="content">
        <div id="main-content">
            <h2>CSS简介</h2>
            <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
            <div class="paragraph">
                <h2 class="first">使用CSS布局的优点</h2>
                <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
            </div>
        </div>
    </div>
    <div id="bottom">
        <h1 class="red blue">bottom</h1>
    </div>
    </body>
</html>

UNDERCOVERj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css权重

第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为100。第三等：代表类，伪类和属性选择器，如.content，权值为10。第四等：代表类型选择器和伪元素选择器，如div p，权值为1。通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中
复制链接

扫一扫