原文：http://www.bkjia.com/Javascri...

样式选择器权重优先级：

important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

  • important的权重为1,0,0,0

  • ID的权重为0,1,0,0

  • 类的权重为0,0,1,0

  • 标签的权重为0,0,0,1

  • 伪类的权重为0,0,1,0

  • 属性的权重为0,0,1,0

  • 伪对象的权重为0,0,0,1

  • 通配符的权重为0,0,0,0

忽然意识到上文的第二行 important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 排序不对啊
于是，又搜了很多，资料如下：
CSS 样式优先级
css优先级
css的样式优先级
css样式继承问题

其中一篇有说这句：

任何显示申明的规则都可以覆盖其继承样式。

还有一篇是这样排序的：

多重样式间遵循：继承来的样式 < 浏览器缺省设置 < 外部样式表 = 内部样式表 < 内联样式

结合 css样式继承问题 这个问题及其答案来看，继承的优先级的确是最低的。

正确的优先级排序应该是：

important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 标签 | 伪元素 > 继承 > 通配符

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h20jb0c2a2j

css样式权重优先级，css样式优先级的更多相关文章

  1. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  2. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  3. 转载：CSS的组成,三种样式(内联式,嵌入式,外部式),优先级

    (仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...

  4. CSS怎样改变行内样式（通过外部级联样式表） css !important用法CSS样式使用优先级判断

    CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!importa ...

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  7. CSS样式权重的级联cascade的概念

    我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...

  8. css的优先级 和 权重问题 以及 !important 优先级

    css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

  9. css权重导致的样式不生效问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. python浅拷贝与深拷贝浅析

    首先我们要明确,python中大多数都是浅拷贝,我们先说原因: 1.时间花费更少 2.内存更小 3.效率更高,浅拷贝只拷贝顶层数据,一般情况下比深拷贝效率高. 容器(如列表)切片是浅拷贝

  2. JZ-045-扑克牌顺子

    扑克牌顺子 题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张_)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的 ...

  3. salesforce零基础学习（一百一十二）项目中的零碎知识点小总结（四）

    本篇参考: https://trailblazer.salesforce.com/issues_view?id=a1p4V0000003znDQAQ https://salesforce.stacke ...

  4. props配置

    配置项props 功能:让组件接收外部传过来的数据[相当于微信转账:有一个转账人转钱给接收者,接收者需要确认接收] (1)传递数据: <Demo name="xxx"> ...

  5. ArcGIS拓扑小技巧：两个面矢量合并但不叠加

    已知数据:底图图斑A,更新图斑B 使用软件:ArcMap 要求:将B于A合并为一个图斑.A与B不能重叠,重叠处以A为基准切割B图斑. 下面开始操作: 1. 将数据集中的图斑A.B添加到数据框内   打 ...

  6. Centos 7.5 通过yum安装GNOME Desktop时出现：file /boot/efi/EFI/centos from install of fwupdate-efi-12-5.el7.centos.x86_64 conflicts with file from package grub2-common-1:2.02-0.65.el7.centos.2.noarch

    系统版本为: [root@s10 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 由于管理kvm虚拟机的需求,需要安装 ...

  7. 6月16日 Django作业 文件解压缩统计行数

    作业要求: 前端页面注意: 自己写的: from django.shortcuts import render, HttpResponse import zipfile import re # Cre ...

  8. Spring Security实现统一登录与权限控制

    1  项目介绍 最开始是一个单体应用,所有功能模块都写在一个项目里,后来觉得项目越来越大,于是决定把一些功能拆分出去,形成一个一个独立的微服务,于是就有个问题了,登录.退出.权限控制这些东西怎么办呢? ...

  9. CF1479B Painting the Array（贪心+DP）

    题目大意:给你一个序列,让你提取出一个子序列A,剩余的部分组成子序列B,现定义seg(x)表示把序列x中相邻的相同数合并成一个数后,序列x的长度,分别求seg(A)+seg(B)的最大值和最小值,n= ...

  10. springboot实现热部署的几种方式

    原理:使用了两个ClassLoader,一个Classloader加载那些不会改变的类(第三方Jar包),另一个ClassLoader加载会更改的类,称为restart ClassLoader,这样在 ...