CSS优先级(冲突)

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

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

CSS优先级

引用方式冲突

继承样式冲突

指定样式冲突

继承样式和指定样式冲突

!important

猜你喜欢