css:选择器的优先级

最新推荐文章于 2024-09-28 18:51:04 发布

别拿我当牛马

最新推荐文章于 2024-09-28 18:51:04 发布

阅读量606

点赞数 8

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

原文链接：https://blog.csdn.net/weixin_53105591/article/details/125739125

版权

wed前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：什么是优先级，它的作用是什么？

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则，当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

1，基本选择器优先级

1，通配选择器作用：可以选中所有的 HTML 元素。

2，id选择器作用：给元素定义一个id属性值来精确选中这个元素。

3，元素选择器作用：为页面中某种元素统一设置样式。

4，类选择器作用：给元素定义一个class属性值来选中这个元素，（正常开发中类选择器用的比较多）。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>选择器的优先级</title>
  <style>
    /* 通配选择器 */
    *{
      color: brown;
    }
    /*元素选择器 */
    div{
      color: coral;
    }
    /* 类选择器 */
    .a{
      color: blue;
    }
    /* id选择器 */
    #b{
      color: yellow;
    }
    /* important  权重第一位*/
    *{
      color: blueviolet !important;
      
    }

  </style>
</head>
<body>
  <!-- 这个是只有通配选择器 -->
  <div>学习前端挂帅杨帆</div>
  <!-- 如果我们加上元素选择器来比较一下元素和通配的优先级 -->
  <!-- 很明显div变成了橙色  由此结论  元素>通配 -->
  <div>吃得苦中苦，方能人上人</div>
  <!-- 下面我们来给他加上类选择器 来比较 类和元素，和通配的优先级 -->
  <!-- 下面的div变成了蓝色    由此结论我的知道  类选择器>元素选择器>通配选择器-->
  <div class="a">温故而知新</div>
    <!-- 下面我们来给他加上id择器 来比较id，类，元素，和通配的优先级 -->
    <!-- div的颜色变成了黄色   id选择器>类选择器>元素选择器>通配选择器  -->
  <div id="b" class="a">付出和回报成正比</div>
  <!-- 注意行内样式大于 id>类>元素>通配 -->
  <!-- div变成了红色 -->
  <div id="b" class="a" style="color: red;">付出和回报成正比</div>
  <!-- 超级优先级  !important 下面我们吧ipmortant 给最小的通配选择器看看 -->
  <!-- 所有div变紫色   !important>行内>id>类>元素>通配  -->
  <div id="b" class="a" style="color: red;">付出和回报成正比</div>
</body>
</html>

由上面代码得出结论：

!important>行内样式>id选择器>类选择器>元素选择器>通配选择器>继承的样式

什么是继承样式呢？初学者可以参考css的三大特性继承性来参考。

2.如果判断复合选择器优先级。

判断复合选择器的权重我们可以分为A,B,C

A:表示ID选择器 B：表示类选择器，伪类选择器，属性选择器。 C：表示元素，伪元素选择器

计算规则：每个选择器，都可计算出一组权重，格式为： (a,b,c)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>选择器优先级</title>
  <style>
    .c,.b{
      color: red;
    }
    div>p>span#a{
      color: darkviolet;
    }
  </style>
</head>
<body>
  <div class="c">
    <p>
        <span class="b" id="a">学好前端，挂帅杨帆</span>
        <span>欢迎同学们来学习！</span>
        <span>行内大于id</span>
    </p>
</div>
</body>
</html>

然后开始作比较（0，1，0）<(1 , 0 , 3)比较规则比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比。