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. RabbitMQ管理界面使用之手动送数据

    目录 1. 找到相应的队列, 点击进入详情 2. 找到Publish Message项,填写自定义数据 3. 发送数据 4. 发送成功 5. 接收 1. 找到相应的队列, 点击进入详情 2. 找到Pu ...

  2. pie-engine-ai项目jenkins.yaml文件

    apiVersion: apps/v1kind: Deploymentmetadata: name: jenkins namespace: pie-engine-ai labels: name: je ...

  3. JS时间处理，兼容IOS

    timeFormatting(val) { let time = val.slice(0, 10) // 兼容IOS time = time.replace(/-/g, '/') let date = ...

  4. [部署日记]Android Studio在安装完后，sdk依旧提示SDK emulator directory is missing

    问题起源: 今天在闲着没事搞了个go的rest-api,用postman测试了一下可行,于是一拍大腿决定写一个安卓手机程序,于是一拍大腿重新下载了卸载没多久因为没空间放原神的Android Studi ...

  5. Mysql数据库的表结构

    [INFORMATION_SCHEMA 数据库] 是MySQL自带的,它提供了访问数据库 元数据 的方式, 元数据:数据库名或表名,列的数据类型,或访问权限等. 在MySQL中,把[INFORMATI ...

  6. Linux Shell开发功能点

    背景 需要操作一批次服务器安装Docker 功能特色 一键执行 bash <(curl -s -L http://server.com/installDocker.sh) MemberNode ...

  7. JupyterNotebook开发介绍

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

  8. Mybatis开发之mapper代理实现自定义接口（常用）

    Mybatis开发之mapper代理实现自定义接口(常用) 通过mapper代理实现自定义接口 自定义接口,接口里面定义定义相关的业务方法 编写方法相对应的Mapper.xml. 定义完接口后,Map ...

  9. django修改认证模型类

    1.我在一个子应用下面创建了一个apps目录,且在apps下又创建了一个子应用users,结构如下图: 2.在users的models.py中 from django.db import models ...

  10. QT如何安装？

    Qt安装教程 OLD HELPS <oldhelps@126.com > 目录 Qt安装教程 下载 注册.登录 接受验证邮件 安装 下载 从https://download.qt.io/n ...