css选择器的优先级和权重计算

最新推荐文章于 2023-09-20 11:08:31 发布

绘梨衣的Sakura

最新推荐文章于 2023-09-20 11:08:31 发布

阅读量623

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Azhongpu/article/details/109728814

版权

本文详细介绍了CSS选择器的优先级和权重计算，包括不同选择器的比较、权重计算方法以及相同级别选择器的比较。重点强调了内联样式、ID选择器、类和伪类选择器、元素和伪元素选择器的权重顺序，并给出了权重计算的四位数规则。同时，建议优化CSS选择器使用，避免在ID和类选择器前使用标签名，减少层级关系以提高效率。

摘要由CSDN通过智能技术生成

css选择器的优先级和权重计算

前言

昨天介绍css选择器，今天我详细介绍一下css选择器的优先级及权重的计算。

一、选择器的优先级和权重计算

1.不同选择器的比较（从高到低）

1.在属性后面加 !important 会覆盖页面内任何位置定义的元素样式
2.内联样式（也就是在作为style属性写在元素内的样式）
3.id选择器
4.类选择器，属性选择器，伪类选择
5.元素选择器，伪元素选择器
结果！important >内联样式>id选择器>class属性、伪类选择器>元素、伪元素选择器

2.权重计算

权重计算：通过选择器，来计算出一个四位数，这里的四位数不是十进制，不用关注进位情况
千位：内联样式
百位：id选择器
十位：类选择器，属性选择器，伪类选择
个位：元素选择器，伪元素选择器
根据数量来决定优先级
代码如下（示例）：

<!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>
        /* 内联样式大于id选择器 */
        #text{
   
            color: red;
        }
        /* id选择器大于类选择器 */
        #content{
   
            color: red;
        }