css选择器优先级问题

SSS4362

于 2022-06-25 19:11:30 发布

阅读量296

点赞数 3

分类专栏： java web基础知识文章标签： css选择器优先级别加法原则标签权重图 css

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

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>