CSS优先级(冲突)

最新推荐文章于 2024-02-17 21:56:43 发布

Lewin671

最新推荐文章于 2024-02-17 21:56:43 发布

阅读量2k

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/QingyingLiu/article/details/82084329

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS优先级

当样式的覆盖发生冲突时，以优先级高的为准。样式覆盖发生冲突常见的共有以下五种情况。

引用方式冲突
继承方式冲突
指定样式冲突
继承样式和指定样式冲突
!important

引用方式冲突

优先级：

行内样式 > (内部样式 = 外部样式)

如果内部样式与外部样式同时存在，则以最后引入的样式为准(后者居上)。

继承样式冲突

如果由于继承方式引起的冲突，则“最近的祖先元素”获胜。

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>example1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        #grandfather{
            color: yellow;
        }
        #father{
            color:aqua;
        }
    </style>
</head>
<body>
    <div id="grandfather">
        <div id="father">
            <div>
                这是一个儿子元素，继承了最近祖先father的颜色属性。
            </div>
        </div>
    </div>
</body>
</html>

运行效果

指定样式冲突

所谓的指定样式，指的是“当前元素”的样式。当直接制定样式发生冲突时，样式权值高者获胜。

在CSS中，各种选择器的权值如下表：

选择器	权值
通配符(*)	0
伪元素	1
元素选择器	1
class 选择器	10
伪类	10
属性选择器	10
id选择器	100
行内样式	1000

注：常见的伪元素只有四个，即::before,::after,::first-letter,first-line。伪类我们经常见到，如:
:hover,:first-child等。

Example2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Example2</title>
    <style type="text/css">
        #test{
            color:orange;
        }
        .test{
            color: greenyellow;
        }
        div{
            color:grey;
        }
    </style>
</head>
<body>
    <div id="test",class="test">id 选择器的优先级最高，所以显示橙色</div>
</body>
</html>

运行效果

注意:我们不应该只从样式顺序来判断。因为只有选择器权重相同时，才会遵从”后来者居上”原则。

继承样式和指定样式冲突

当继承样式和指定样式发生冲突时，指定样式获胜。

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>example1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        #grandfather{
            color: yellow;
        }
        #father{
            color:aqua;
        }
        #son{
            color:gray;
        }
    </style>
</head>
<body>
    <div id="grandfather">
        <div id="father">
            <div id="son">
                指定样式指的是当前元素的样式，当前元素是div，id=”son“，所以此时现实的是id=”son"的样式。
            </div>
        </div>
    </div>
</body>
</html>

运行效果

!important

这种方法会强制改变样式的优先级，很不建议使用，所以在这里也不作讲解。

Lewin671

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
CSS优先级(冲突)

CSS优先级当样式的覆盖发生冲突时，以优先级高的为准。样式覆盖发生冲突常见的共有以下五种情况。引用方式冲突继承方式冲突指定样式冲突继承样式和指定样式冲突!important引用方式冲突优先级：行内样式 &amp;gt; (内部样式 = 外部样式)如果内部样式与外部样式同时存在，则以最后引入的样式为准(后者居上)。继承样式冲突如果由于继承方式引起的冲突，则...
复制链接

扫一扫