CSS三大特性之优先级你在写CSS代码样式时，是否总是不起作用？

最新推荐文章于 2021-12-10 15:10:21 发布

鸭绒

最新推荐文章于 2021-12-10 15:10:21 发布

阅读量248

点赞数

分类专栏：布局效果文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107175395

版权

文章目录

- - - 1. 选择器优先级
    - - 1.1 优先级注意点
        
        1.2 权重叠加
        
        1.3 示例

1. 选择器优先级

选择器权重如下图所示：

选择器	选择器权重
继承或*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式 style=" "	1，0，0，0
!important	无穷大

1.1 优先级注意点

权重是有4组数字组成，但是不会有进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，依次类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10，id选择器100，行内样式表为1000，！important无穷大。
继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素继承的权重都是0

1.2 权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li 三类都是元素选择器---->0,0,0,3
.nav ul li 一个类选择器，两个元素选择器---->0,0,1,2
a:hover 一个元素选择器，一个伪类选择器----->0,0,1,1
.nav a 一个类选择器，一个元素选择器----->0,0,0,1

1.3 示例

看下面代码，你猜猜文本的字体颜色：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>插件</title>
  </head>
  <style>
    .nav {
   
      color: red;
    }
    li {
   
      color: pink;
    }
  </style>
  <body>
    <ul class="nav">
      <li

最低0.47元/天解锁文章

鸭绒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性之优先级你在写CSS代码样式时，是否总是不起作用？

文章目录1. 选择器优先级1.1 优先级注意点1.2 权重叠加1.3 示例1. 选择器优先级选择器权重如下图所示：选择器选择器权重继承或*0，0，0，0元素选择器0，0，0，1类选择器，伪类选择器0，0，1，0ID选择器0，1，0，0行内样式 style=" "1，0，0，0!important无穷大1.1 优先级注意点权重是有4组数字组成，但是不会有进位。可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，依次类
复制链接

扫一扫