• 1.3优先级

    提示：在优先级选择器里面 无穷大（优先级高）一次向上

    继承或者“*”号0,0,0,0
    元素选择器0,0,0,1
    类选择器、伪类选择器0,0,1,0
    ID选择器0,1,0,0
    行内有样式style=“”1,0,0,0
    ！important重要的无穷大

    优先级注意：

    1、权重是有4组数字，但是不会有进位。

    2、可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。

    3、等级判断从左向右，如果一位数值相同，则判断下一位数值。

    4、可以简单记忆法：

           继承或者“*”为0

           元素选择器为1

           类和伪类选择器为10

          ID选择器为100

         行内样式style=""为1000

         ！important重要的为无穷大

    其他没有说都为0，一共四组数字

    5、继承的权重，如果元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

    6、权重叠加：如果复合选择器，则会权重叠加需要计算权重，比如：

    计算：div  ul  li  ,所以这里的权重为3。

    div0,0,0,1
    ul0,0,0,1
    li0,0,0,1
    0,0,0,3

    计算：.nav:hover   ,所以这里的权重为11。

    .nav0,0,1,0
    :hover0,0,0,1
    0,0,1,1

    计算：.nav ul li     ,所以这里的权重为12。

    .nav0,0,1,0
    ul0,0,0,1
    li0,0,0,1
    0,0,1,2

    注意：复合选择器会有权重叠加问题，权重虽然会叠加，但是永远不会进位。

    自己代码展示：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>优先级执行title>
    9.     <style>
    10.         idv {
    11.             /* 这个是元素标签 */
    12.             color: pink !important;
    13.         }
    14.         
    15.         .test {
    16.             /* 这个是选择器 */
    17.             color: red;
    18.         }
    19.         
    20.         #demo {
    21.             /* 这个就是id选择器 */
    22.             color: aquamarine;
    23.         }
    24.     style>
    25. head>
    26.  
    27. <body>
    28.     <div class="test" id="demo" style="color: purple">小猪佩奇div>
    29.     
    30.     有一个等级优先顺序： 1.继承或者* 2.元素选择器 3.类选择器 为类选择器 4.id选择器 5.行内样式style=“color” 6.！important重要
    31.  
    32.  
    33. body>
    34.  
    35. html>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>优先级权重title>
    9.     <style>
    10.         /* 复合选择器会有会有叠加问题
    11.         权重虽然会叠加、有远不会进位 */
    12.         
    13.         li {
    14.             /* 这个权重就是：元素标签选择器“0,0,0,1” */
    15.             color: red;
    16.         }
    17.         
    18.         ul li {
    19.             /* 而这个就是两个元素选择器相加：
    20.             0.0.0.1
    21.             0.0.0.1
    22.             结果就是
    23.             0.0.0.2
    24.             这个显示比上一个权重大优先执行这个 */
    25.             color: pink;
    26.         }
    27.     style>
    28. head>
    29.  
    30. <body>
    31.     <ul>
    32.         <li>大猪蹄子li>
    33.         <li>大猪蹄子li>
    34.         <li>大猪蹄子li>
    35.  
    36.  
    37.     ul>
    38.  
    39. body>
    40.  
    41. html>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>优先级注意title>
    9.     <style>
    10.         #father {
    11.             /* 父类的权重是100 */
    12.             color: red;
    13.         }
    14.         /* 所以以后我们看到标签执行那样式，就先看看这个标签有没有直接被选出来
    15.         优先执行先选出来的标签
    16.         就比如a标签必须选出来改颜色 */
    17.         
    18.         p {
    19.             /* p继承的权重为0 */
    20.             color: pink;
    21.         }
    22.         
    23.         body {
    24.             color: red;
    25.         }
    26.     style>
    27. head>
    28.  
    29. <body>
    30.     <div id="father">
    31.         <p>你还是很好看p>
    32.         
    33.     div>
    34.     <a href="#">我是单独的样式a>
    35. body>
    36.  
    37. html>

    显示结果：

     

     

    总结

    提示：这里对文章进行总结：
    例如：以上就是今天要讲的内容，本文仅仅简单介绍了优先级以及权重算法。

  • 相关阅读:
    【OpenCV】计算视频的光流并跟踪物体calcOpticalFlowPyrLK
    【前端知识之JS】JS原生手写轮播图
    一个Flutter&Cocoapods项目打包问题集锦
    css知识学习系列（15）-每天10个知识点
    数字化营销：企业营收N倍增长的秘诀
    Spring-Spring之事务底层源码解析
    【完美解决】IDEA 中 Maven 报错 Cannot resolve xxx 和 Maven 中 Dependencies 报红报错。
    DHorse v1.4.2 发布，基于 k8s 的发布平台
    勘测、军用、探测部门常用的，双光融合热成像夜视仪 ---TFN TD8V
    【SQL Server】入门教程-基础篇(完结)
  • 原文地址：https://blog.csdn.net/qq_62865634/article/details/126803099