JinLinC个人在线文档库

权重

CSS样式是一种层叠样式表（一个元素上可以有多个样式），如果多个样式之间没有规则冲突，所有设置的样式都可以生效，但是如果存在了样式冲突，我们最后到底要使用那部分的样式，就需要通过权重来进行确定，权重控制样式的优先级

html

<body>
    <span class="fontclass">jlc</span>
</body>

<style>   
    /*设置span标签的样式字体颜色为红色*/
    span {
        color: red;
    }
    
    /*通过类选择器设置字体颜色为绿色*/
    .fontclass {
        color: green;
    }
</style>

上述例子中，存在多个样式之间的冲突，最后会执行的是class中的类样式，即字体显示的颜色为绿色，因为在系统默认中，类样式的权重比分组选择器的样式权重要高（在系统中权重位值越大，对应的权重就越高），系统中常见的权重编号有：

id的权重位是0100
class，类属性值的权重位是0010
标签，伪元素的权重位是0001
*的权重位是0000
行内样式的权重位是1000（行级选择器的权重是最高的）但是行级选择器这个方法不建议去使用，因为后续可能会出现样式的冲突问题，行级样式的方式不建议去使用

对于权重是一样的样式（如一个标签中使用多个类选择器，多个类中存在样式的冲突）

html

<body>
    <span class="fontclass dateclass">jlc</span>
</body>

<style>   
    /*设置span标签的样式字体颜色为红色*/
    .dateclass {
        color: red;
    }
    
    /*通过类选择器设置字体颜色为绿色*/
    .fontclass {
        color: green;
    }
</style>

对于这样的情况，在<style>样式编写区域，哪个样式是后出现的，就使用哪个样式，上述例子中，使用的是fontclass这样式

权重的叠加

我们可以通过权重的叠加来实现优先级的提高

html

<body>
    <span class="fontclass dateclass">jlc</span>
</body>

<style>   
    /*权重叠加，权重位是11，实现的是其内部的样式，标签字体显示红色*/
    span .dateclass {
        color: red;
    }
    
    .fontclass {
        color: green;
    }
</style>

span标签的权重为0001，类选择器的权重为0010，叠加后的权重为0011，大于类选择器fontclass的权重，所以，最后字体显示的样式为红色
我们可以对fontclass属性选择器进行属性权重的叠加，是其权重变成20
css
.fontclass[class] {
 color: green;
}

强制提升权重优先级

在权重优先级中，行级样式的权重是最高的，一但当前标签设置了行级样式，其他一切选择器的冲突样式都会失效，但是，我们如果想要低优先级的样式进行生效，我们可以使用强制去提示权重的优先级，直接将该样式的优先级提升到最高

css

.fontclass[class] {
    color: green !important;
}

强制提升权重优先级这个方法，我们一般情况下是不推荐使用的，因为他后破坏CSS的规则，但是有些场景我们必须要进行使用：我们使用外置组件库时（element-plus），我们有时想要替换到外置组件原来的样式，我们一般会使用强制的优先级替换原本的样式

继承

CSS样式规则的继承：如果我们的某个元素没有定义样式规则，当该元素的父级元素定义了，那么这个元素的样式就会继承父级元素定义的样式

html

<body>
    <article>
        <div>jlc</div>
    </article>
</body>

<style>
    article {
        color: red;
    }
</style>

<div>jlc</div>标签没有设置样式，所以会继承父级的样式，因此字体颜色是红色的

注意：继承没有权重，如果子元素定义了任何的样式规则，都会在子元素上进行生效，断开父元素的继承

一般情况下，我们需要将网页当中大部分元素会应用到的场景，会在父元素中设置统一的样式（如字体大小，颜色等等），但是，有一些的属性是不会被继承的，如：边框，如果子元素需要边框，必须在子元素下进行设置边框样式

通配符与继承

通配符的权重是0000，继承的权重是无，0权重和无权重不是相等的，0权重大于无权重

html

<body>
    <article>
        <h2>
            jlc
            <span>111</span>
        </h2>
    </article>
</body>

<style>
    * {
        color: green;
    }
    
    h2 {
        color: red;
    }
</style>

上述例子中：jlc是显示红色的，111是显示绿色的
因为<span>111</span>标签没有设置自己的样式，所以会去继承h2标签的样式，但是又存在通配符*的所有标签的样式，其权重为0，大于继承的权重无，所有其内容会显示绿色

权重 ​

权重的叠加 ​

强制提升权重优先级 ​

继承 ​

通配符与继承 ​

权重

权重的叠加

强制提升权重优先级

继承

通配符与继承