css样式优先级机制

最新推荐文章于 2024-08-11 23:43:12 发布

Hi-ZhiWei

最新推荐文章于 2024-08-11 23:43:12 发布

阅读量955

点赞数

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

本文链接：https://blog.csdn.net/github_37578362/article/details/56049809

版权

html+css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对css选择器不熟悉的建议先看看w3school

一、权值不同时

样式类型	权重值
style内联样式（标签内部）	1000
ID选择器	0100
类选择器，属性选择器，伪类	0010
元素选择器，伪元素	0001

下面我们就可以根据上表的权值来计算和比较优先级

选择器	权重值
div span {color:blue}	1+1=2
div .hot {color:yellow}	10+1=11
#wrap span {color:black}	100+1=101
#wrap .hot {color:red}	100+10=110

1、根据上面的权重值计算，我们可以知道最终样式为color:red。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div span {color:blue;}
        div .hot {color:yellow;}
        #wrap span {color:black;}
        #wrap .hot {color:red;}
    </style>
</head>
<body>
    <div id="wrap" class="div1">
        <span class="hot">
            hhhhhhhhhhhhhhhhh
        </span>
    </div>
</body>
</html>

运行结果确实为红色：
这里写图片描述

注意一下：

虽然理论上优先级是按上面的权值计算，但是那只是基于同级上的比较。（11个元素选择器级别比不上1个类选择器，其余同理）

当然，还有比style行间样式优先级更高的是javascript写的样式，即js能修改掉css中的样式，但有一个是例外，那就是css样式中加了！important 。

2、还是上面的栗子，首先看一下js修改css样式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div span {color:blue;}
        div .hot  {color:yellow;}
        #wrap span {color:black;}
        #wrap .hot {color:red;}
    </style>
    <script>
        window.onload = function () {
//            修改span里面字体颜色为粉红色
            var oHot = document.getElementsByTagName('span')[0];
            oHot.style.color = 'pink';
        }
    </script>
</head>
<body>
    <div id="wrap" class="div1">
        <span class="hot">
            hhhhhhhhhhhhhhhhh
        </span>
    </div>
</body>
</html>

运行结果，文字变成了粉红色：
这里写图片描述

3、！important具有最高的优先级，当给选择器中加了！important，js是无法修改的。现在试试给权值最小的div span加上！important
（需要提一下：IE6的渲染引擎不认识！important，解析时会自动忽略）

div span {color:blue; color:orange!important;}

结果字体是橘色的
这里写图片描述

4、继承的样式权值很小，可以看做0或者接近0

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div .hot  {color: blue;}
        div.div1  {color:yellow;}
    </style>
</head>
<body>
<div class="div1">
    <span class="hot">
        hhhhhhhhhhhhhhhhh
    </span>
</div>
</body>
</html>

这里结果为蓝色
这里写图片描述

二、权值相同时

一般来说，内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）。但是如果外部样式放在内部样式后面，那么外部样式将覆盖内部样式。
综上我们可以用“就近原则”来说明权值相同时，靠近元素的样式级别优先

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;;
        }
        .div1 {background-color:red;}
        .div2 {background-color: blue;}
    </style>
</head>
<body>
    <div class="div1"></div>
    <hr/>
    <div class="div2"></div>
    <hr/>
    <div class="div1 div2"></div>
    <hr/>
    <div class="div2 div1"></div>
    <hr/>
</body>
</html>