网站首页编程语言正文

css选择器优先级问题

作者：SSS4362 更新时间： 2022-07-10 编程语言

css选择器优先级问题(选择器的权重图)

A.为啥有此问题的产生?

a.众所周知,css对于同一属性先进行优先级别的判断,若比之前渲染的优先级别高,那么就会渲染成这个优先级别较高的。

b.对于单一的选择器而言,优先级别有固定的顺序,按照这个优先级别去设置同一样式,就不会出现样式覆盖,但是如果遇到了中级选择器(如派生选择器),该如何判断优先级别呢?

因此就提出了选择器权重规则

B.选择器权重图如下所示:

选择器	权重
!important	无穷大
行内样式(标签里面写style)	1000
id选择器	100
类选择器(class)	10
属性选择器([属性名=属性值])	10
伪元素	10
标签选择器§	1
伪类	1
通配符	0

C.中级选择器甚至更复杂的选择器如何进行权重的计算呢?

1.以下面的源代码为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器权重问题</title>
   <style type="text/css">
       div > #content span{
           color: brown;
           font-family: "宋体";
       }
       div .one span{
           color: pink;
           font-family: "楷体";
       }
   </style>
</head>
<body>
    <div>
        <div class="one" id="content"><span>坚持,不只是为了离梦想更近一步</span></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

2.分析

选择器的执行顺序是从上往下的

那么div .one span这个选择器在 div > #content span选择器之后,为啥不会显示后者所编写的css样式,而是选择显示前者的css样式呢?
我们给div .one span选择器取名为m,div > #content span选择器取名为n

那么m的权重=标签选择器权重×1+类选择器权重×1+标签选择器×1

=1+10+1=12

n的权重=标签选择器权重×1+id选择器权重×1+标签选择器×1

=1+100+1=102

m的权重<n的权重

因此n的优先级别高,不用管其在css里面的位置,只要写了,就一定是它优先执行

不会被后面比它优先级小的选择器修改样式

总结:复杂的选择器权重=单个选择器权重之和

3.运行结果

在这里插入图片描述

原文链接：https://blog.csdn.net/SSS4362/article/details/125454833

网站首页 编程语言 正文