css的优先级之前一直没怎么注意没当回事，总以为对同一元素靠后的渲染会覆盖前面的渲染，要是覆盖不了那就来个!important嘛。直到我那在学前端基础的后端伙伴拿一个问题问住了我，我才意识到这是重点中的重点啊！啪啪啪打脸！

优先级关系

先来看css为元素添加样式的几种规则（优先级a>b>c>d，!important无敌）

权重计算

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法其实是有问题的，但普通情况下这个已足够我们判断，很少情况下会如如下例子这么极端：

比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：权重的进制是并不是十进制，CSS 权重进制在 IE6 为 256，后来扩大到了 65536，现代浏览器则采用更大的数量。

还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100， 你可以理解为 99.99，所以最终应用后者样式。

补充

0.继承得到的样式的优先级最低。

1.虽然提高选择器的权重值能有效解决靠后的渲染失败问题，但也仅仅是个解决方法，渲染不冲突的情况下，不要写那么多累赘

2.!important虽无敌和style虽一人之下，但都应尽量避免使用

CSS（二）- 选择器 - 一定要搞懂的选择器优先级和权重问题的更多相关文章

  1. 【10分钟学Spring】：（二）一文搞懂spring依赖注入（DI）

    Spring最基础的特性就是创建bean.管理bean之间的依赖关系.下面通过具体实例演示该如何装配我们应用中的bean. Spring提供了三种主要的装配机制 在xml中进行显示的配置 在Java中 ...

  2. 数据可视化之DAX篇（二十二）一文搞懂Power BI中的排名问题

    https://zhuanlan.zhihu.com/p/68384001 本文聊聊在PowerBI中如何进行各种类型的排名问题. PowerBI中计算排名主要使用RANKX函数,关于该函数的具体语法 ...

  3. 链表算法题二，还原题目，用debug调试搞懂每一道题

    文章简述 大家好,本篇是个人的第4篇文章. 承接第3篇文章<开启算法之路,还原题目,用debug调试搞懂每一道题>,本篇文章继续分享关于链表的算法题目. 本篇文章共有5道题目 一,反转链表 ...

  4. 彻底搞懂 etcd 系列文章（二）：etcd 的多种安装姿势

    0 专辑概述 etcd 是云原生架构中重要的基础组件,由 CNCF 孵化托管.etcd 在微服务和 Kubernates 集群中不仅可以作为服务注册与发现,还可以作为 key-value 存储的中间件 ...

  5. Java进阶专题(二十六) 将近2万字的Dubbo原理解析，彻底搞懂dubbo

    前言 ​ 前面我们研究了RPC的原理,市面上有很多基于RPC思想实现的框架,比如有Dubbo.今天就从Dubbo的SPI机制.服务注册与发现源码及网络通信过程去深入剖析下Dubbo. Dubbo架构 ...

  6. 真正“搞”懂http协议01—背景故事

    去年读了<图解HTTP>.<图解TCP/IP>以及<图解网络硬件>但是读了之后并没有什么深刻的印象,只是有了一层模糊的脉络,刚好最近又接触了一些有关http的相关内 ...

  7. 不再混淆，一次搞懂！图解flexbox十余个属性

    原文首发于个人博客:不再混淆,一次搞懂!图解flexbox十余个属性 flexbox的发明简直是csser的一大福音,终于可以不再需要为垂直居中一个元素而绞尽脑汁了.同时它还能够实现弹性布局,可以说没 ...

  8. 搞懂ELK并不是一件特别难的事（ELK）

    本篇文章主要介绍elk的一些框架组成,原理和实践,采用的ELK本版为7.7.0版本 一.ELK介绍 1.1.ELK简介 ELK是Elasticsearch.Logstash.Kibana三大开源框架首 ...

  9. 彻底搞懂Javascript的“==”

    本文转载自:@manxisuo的<通过一张简单的图,让你彻底地.永久地搞懂JS的==运算>. 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容让人犯错,从而 ...

随机推荐

  1. docker registry 镜像同步

    docker registry 镜像同步 Intro 之前我们的 docker 镜像是保存在 Azure 的 Container Registry 里的,最近我们自己搭建了一个 docker regi ...

  2. python中的类型

    python中的类型分为四种 1.整形 2.浮点型 3.字符串 4.对象(除了前三种,其他的都是对象) 比如函数也是对象 def fun(): print(123) type(fun) // < ...

  3. pyqt5 主界面打开新主界面的实现

    import sys from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtGui import * ###### ...

  4. Flask 蓝图（Blueprint）使用方式解析

    Flask蓝图提供了模块化管理程序路由的功能,使程序结构清晰.简单易懂.下面分析蓝图的使用方法 假如说我们要为某所学校的每个人建立一份档案,一个很自然的优化方式就是这些档案如果能分类管理,就是说假如分 ...

  5. Py中去除列表中小于某个数的值

    ### Py去除列表中小于某个数的值 print('*'*10,'Py去除列表中小于某个数的值','*'*10) nums = [2,3,4,10,9,11,19,14] print('*'*10,' ...

  6. TensorFlow从0到1之程序结构（5）

    TensorFlow 与其他编程语言非常不同. 首先通过将程序分为两个独立的部分,构建任何拟创建神经网络的蓝图,包括计算图的定义及其执行.起初这对于传统程序员来说看起来很麻烦,但是正是图定义和执行的分 ...

  7. java中工厂模式

    最近在项目中使用了工厂模式来重构下之前的代码,在这里做个小结. 工厂模式最主要的特点是每次新增一个产品的时候,都需要新增一个新的工厂,这样在对于新的产品做扩展的时候,减少对客户端代码的修改. 我在项目 ...

  8. numpy矩阵相加时需注意的一个点

    今天在进行numpy矩阵相加的时候出现了一个小的奇怪的地方,下面我们来看看: >>>P = np.array([1,2,3,4]) >>>F = np.array( ...

  9. 循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用

    在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此 ...

  10. 第一章、认识Shiro

    Shiro简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Securi ...