CSS--选择器优先级

前端小云儿

于 2024-03-20 11:16:14 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

分类专栏：前端静态页面以及逻辑文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136870763

前端静态页面以及逻辑专栏收录该内容

150 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细探讨了CSS选择器的优先级规则，包括内联样式、ID选择器、类选择器、元素选择器等的权重计算，以及如何理解和避免选择器权重冲突，提升CSS样式的控制力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script setup></script>

<template>
  <div class="box">
    <h3>CSS选择器优先级</h3>
    <div>css特性：继承性--继承父类，层叠性--相互冲突，优先级--不同作用域的</div>
    <h4>优先级：同一个元素 添加新的更多样式，谁的权重高，展示谁</h4>
    <h4>标签(元素)，类选择器，伪类，属性，全局选择器（*），行内样式，id ！important</h4>
    <div>！important>行内样式>id> 类选择器，伪类，属性>标签>全局选择器</div>
    <h4>元素选择器: p {color:red;}--选择所有p元素。</h4>
    <h4>类选择器: .mystyle {color:red;}--选择所有class='mystyle’的标签元素</h4>
    <h4>id选择器:#myid {color:red;}</h4>
    <h4>属性选择器:a[class]:选择所有带有class属性的a元素</h4>

    <div>
      <h4>
        浏览器根据css样式渲染某一个元素时，会遵循一定的规则，一般来说有以下的优先级规则，我们将其量化为特异性值
      </h4>
      <h4>行内样式（1000），如h1