当前位置：首页 > article >正文

css:权重计算

article 2024/11/17 1:37:36

css三大特性

三大特性：层叠级、继承级、优先级

层叠性

当样式覆盖（冲突）的时候，就会取离结构近的样式（也就是写得靠后的样式）

只有冲突的时候才覆盖，下图的代码只有颜色会根据就近原则，而字体没有冲突

呈现的就是12px大小的blue颜色

.nav{
    color: aquamarine;
    font-size:12px;
}
.nav{
    color:blue;
}

继承性

子标签继承父类标签的属性，比如文本颜色和字号

子标签如果指定有样式就按自己的样式，如果没有就继承自己父亲的，如果自己父亲也没有就继承它父亲的父亲(这句是优先级的体现)

继承性可以简化我们的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<section></section>

<body>
    <div>
        <p>你们好啊我是div的子</p>
    </div>
</body>

</html>

下图的inherited就是继承的意思，p的属性继承自div的属性

一般text- font- line-开头的属性可以继承，color属性也可以，但是高度、宽度这些继承不了

行高的继承

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: blue;
            font: 12px/24px 'microsoft yahei';
        }
    </style>
</head>
<section></section>

<body>
    <div>你们好啊我是div</div>
    <p>你们好啊我是p</p>
</body>

</html>

可以看见子标签继承了body标签的属性

有时候我们的行高会这样表示

   body {
            color: blue;
            font: 12px/1.5 'microsoft yahei';
        }

后面的1.5没单位，代表着继承body的行高时，要用自己的文字大小（size）乘自己当前行高的相应倍数，在这里就是1.5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: blue;
            font: 12px/1.5 'microsoft yahei';
        }

        div {
           font-size: 14px;  
           /* 因为层叠性，所以div的大小为14px
            因为行高继承性，所以div的行高是14*1.5==21px */
        }
    </style>
</head>
<section></section>

<body>
    <div>你们好啊我是div</div>
    <p>你们好啊我是p</p>
</body>

</html>

我们验证一下:

不同大小的字体可以继承不同大小字体对应的行高，实现了子元素行高的“多态”

优先级

我们之前学用通配符操作样式的时候提到*优先级比较低，容易被其他样式覆盖

优先级就是代表了选择器样式在应用时的权重

选择器	选择器权重
*、继承	0,0,0,0
元素选择器（标签选择器）	0,0,0,1
类选择器、伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important重要的	∞无穷大

这个四位数字是表示权重用的，高位为1就是优先级高，不存在进位的情况

给父类写样式的时候，继承到子类就是最低权重（对应上图的继承的权重为0,0,0,0）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        #sjb {
            font-size: 14px;
            color: brown
        }

        p {
            color: aqua;/*#sjb是id选择器，按理来说优先级应该高于标签选择器，但是#jsb是父亲的id选择器，对于p这个儿子来说就是继承的选择器，优先级为0,0,0,0,而我们又单独把p标签拉出来定义了样式，所以就按照给p标签定义的样式来呈现*/
        }
    </style>
</head>
<section></section>

<body>
    <div>你们好啊我是div</div>
    <p>你们好啊我是p</p>
    <div id="sjb">
        我是div<br />
        <p>我是div的子p</p>
    </div>
</body>

</html>

而a链接不太一样，a链接我们默认在浏览器打开就是蓝色+下划线，这是浏览器给它默认的样式，就像它天生就自带一个：

a{
    color:blue;
    text-decoration: underline;
}

所以这个时候也需要单独对a进行更改，对a的父标签更改是没有作用的（如上图）

权重叠加

看得我乱七八糟的！我们直接计算吧！

代码中对p进行了两次定义，div里面的p和外面的p会有什么区别呢？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        p {
            color: aqua;
        }

        div p {
            color: gold;
        }
    </style>
</head>
<section></section>

<body>
    <p>你们好啊我是p</p>
    <div id="sjb">
        <p>我是div的子p</p>
    </div>
</body>

</html>

结果是：div内部的p执行的是div p{}的声明，外面的p执行的是p{}的声明

他们的优先级是这样呈现的：

p==0,0,0,1(标签选择器)

div p==0,0,0,1+0,0,0,1=0,0,0,2（标签选择器+标签选择器）（之前说过，数字不进位，如果0001等级超过10的话就是0,0,0,10,逗号只有三个）

div p是复合选择器，复合选择器有权重叠加的问题

计算之后从左往右比，谁高位数字大，谁优先级的权重大，在这里0002>0001，所以div p{}的优先级高

来出个题吧：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .nav ul li {
            color: pink;
        }

        div ul li {
            color: aqua;
        }
    </style>
</head>
<section></section>

<body>
  
    <div class="nav">
        <ul>
            <li>我是类名为nav的div下的ul下的子li</li>
        </ul>
    </div>
</body>

</html>

来算算谁的权重大：

.nav ul li==0010+0001+0001(类选择器+标签选择器+标签选择器)==0012

div ul li==0001+0001+0001（标签选择器*3）==0003

所以是什么颜色呢？粉色！（.nav ul li{}的优先级比div ul li{}的优先级高）