CSS样式的优先级应该分成四大类

第一类`!important`，无论引入方式是什么，选择器是什么，它的优先级都是最高的。

第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。

第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。

第四类继承样式，是所有样式中优先级比较低的。

第五类浏览器默认样式优先级最低。

样式优先级的规则：!important`>行内样式>嵌入样式>外链样式>id选择器>类选择器>标签选择器>复合选择器>通配符>继承样式的更多相关文章

  1. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  2. css样式优先级计算规则

    css样式的优先级分为引入优先级和声明优先级. 引入优先级 引入样式一般分为外部样式,内部样式,内联样式. 外部样式:使用link引入的外部css文件. 内部样式:使用style标签书写的css样式. ...

  3. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  4. important覆盖行内样式

    优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...

  5. css调试与样式优先级

    如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...

  6. css 选择器样式优先级

    !important > 行内 >id > class >tag >*

  7. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  8. Web前端开发最佳实践（6）：过时的块状元素和行内元素

    前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...

  9. 0008 CSS初识（行内式、内部样式表、外部样式表）

    typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...

  10. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. 在C#中Release与Debug的区别小案例

    我们都听说过C#写的代码 Release通常会比Debug性能要好一点跑得快一些. 先普及一些相关基础知识: (1)在CLR中将对sbyte.byte.short.ushort.int.uint.ch ...

  2. 关于window的文件路径

    跟大家分享一下,初学者的坑.事情是这样的,windows下读取文件路径失败,以下是简单python代码: 点击查看代码 with open("F:\python_file_data\pyth ...

  3. 剑指 Offer 栈与队列

    09. 用两个栈实现队列 没啥意思 不要想复杂了 就是暴力 class CQueue { public: CQueue() { } /* 一个主栈 一个缓存栈 来回导 得到队头 copy后一端变空了 ...

  4. 使用ts二次封装storage(sessionStorage/localStorage)

    export class LocalCache { setCache<T = any>(key: string, value: T): boolean; setCache<T = a ...

  5. MyBatis_10(分页插件)

    主题:分页插件 --> 针对:查询功能 一.分页插件使用步骤: 1-添加依赖 <!-- https://mvnrepository.com/artifact/com.github.page ...

  6. JupyterNotebook开发介绍

    简单介绍 核心目录在notebook下面,主页面在tempaltes目录下的notebook.html文件,没有用到传统的前端开发技术,还是jquery之类的前端,而且用了非常多的类库,开发环境的搭建 ...

  7. PyTables 教程（二）多维表单元格和自动健全性检查，使用链接更方便地访问节点

    翻译自http://www.pytables.org/usersguide/tutorials.html 多维表单元格和自动健全性检查 现在是一个更真实的例子(即代码中有错误)的时候了.我们将创建两个 ...

  8. PPT导出高分辨率tif图片——用于学术论文

    PPT导出的图片默认分辨率只有96dpi,但要到印刷品要求的图片分辨率最好是300dpi,学术论文也需要高清晰度的图片.要让PPT导出的图片分辨率达到300dpi,其实可以不用PS,直接修改系统注册表 ...

  9. git通过ssh方式免密克隆代码仓库

    git上添加ssh公钥 略过 终端命令行 格式: git clone ssh://[user@]host.xz[:port]/path/to/repo.git/ 栗子: git clone ssh:/ ...

  10. 用python3操作mysql数据库实现企业级产品参数查询

    Python3 MySQL 数据库连接 - PyMySQL 驱动 一.什么是 PyMySQL? PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库,Python2中则 ...