CSS三大特性——优先性

1年前更新

160

文章目录[隐藏]

ID选择器＞类选择器
注意点：

当多个选择器指向同一个元素时候，就会产生优先级，不同选择器有不同的权重的。

选择器	权重
继承或者*选择器	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式选style=""	1,0,0,0
!important	无穷大

类选择器＞元素选择器

<head>
    <style>
        .nav {
        color: red;
        }
        body{
            color: #fff;
            font: 12px 'Microsrft YrHei';
        }
       
    </style>
</head>

<body>
    <p class="nav">造梦空间论坛</p>
</body>

类首先看到有两个color冲突了，然后有类选择器和元素选择器，然后类选择器的优先级笔元素选择器的优先级高，所以执行类选择器，所以这个是显示红色。

ID选择器＞类选择器

<head>
    <style>
        #zmkj {
        color: rgb(0, 255, 0);
       }
        .nav {
        color: red;
        }
        body{
            color: #fff;
            font: 12px 'Microsrft YrHei';
        }

    </style>
</head>

<body>
    <p class="nav" id="zmkj">造梦空间论坛</p>
</body>

ID选择器＞类选择器＞元素选择器，所以是绿色。