css选择器的权重

最新推荐文章于 2024-09-27 11:01:06 发布

lxl211

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量54

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/lxllxl211/article/details/127230286

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

    <!--        #w  .t   p    
    优先级：行内＞id＞类＞元素＞继承 *
    当同一元素指定多个选择器，就会有优先级的产生
    1、选择器相同，则执行层叠性
    2、选择器不同，则根据 选择器权重 执行

    选择器权重：                 权重往下越来越大
      选择器：                             
      继承或者*                    0，0，0，0       0
  p   元素/标签选择器               0，0，0，1		1
 .t   类选择器、伪类选择器          0，0，1，0		10
 #w   id选择器                     0，1，0，0  		100
      行内样式style=“”             1，0，0，0 		1000
    ！important 重要的           最大的

代码例子：

    <style>
        /* 元素选择器 */
        div {
            color: pink;
            font-size: 40px;
            font-family: 手书体;
        }

        /* 类选择器 */
        .test {
            color: red !important;
        }
        /* id */
        #youxian {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="test" id="youxian" style="color: rgb(197, 101, 228);">你笑起来真好看,像市场的瓜一样，嗯，一口一个。。</div>
</body>