相同优先级的选择器生效方式

当优先级相同的时候，在后边书写的样式优先级高
link元素其实也是把样式关联上，选择器优先级相同的情况写，后写的生效

选择器优先级的权重计算：

行内样式： 1000
id：100
类：10
标签名：1

!important>内联样式>id>类|属性>标签>通配符>继承>浏览器默认

可以看看下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级</title>
    <style>
        #box p{
            /*1 --101*/
            background-color: red;
        }
        #box .con p{
            /*2 -- 111*/
            background-color: pink;
        }
        .box #con p{
            /*3--111*/
            background-color: green;
        }
        .box .show p{
            /*4--21*/
            background-color: yellow;
        }
        .box .con .show p{
            /*5 -- 31*/
            background-color: grey;
        }
        #box .show p {
            /*6 --111*/
            background-color: purple;
        }
        #box #con .show p{
            /*7 -- 211*/
            background-color: #5ab3f4;
        }
        #box #con #show p{
            /*8  -- 301*/
            background-color: #5df2ff;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div id="con" class="con">
        <div class="show" id="show">
            <p>我是一个p标签</p>
        </div>
    </div>
</div>
</body>
</html>

选择器的优先级

相同优先级的选择器生效方式

选择器优先级的权重计算：