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. log4j2.xml配置全部正确，但是控制台不能输出错误日志

    如果配置文件,确定都没有问题,那么可能是Logger的包引入的不对: private static Logger logger = LogManager.getLogger(TrainControll ...

  2. 关于视频加密ts格式转MP4的方法

    copy /b "%~dp0"\*.ts "%~dp0"\new.ts 最近在手机浏览器上下载了钢铁侠等漫威电影,觉得不错想保存到手机上,却都又是m3u8格式, ...

  3. nginx 反向代理 (websocket)后报 - 400 bad request

    nginx的反向代理. nginx.conf中的配置如下: location / {        proxy_http_version                1.1;         pro ...

  4. golang 日志

    package log import ( "NOONASN/global" "github.com/natefinch/lumberjack" "go ...

  5. python36

    无限循环 如果条件判断语句永远为 true,循环将会无限的执行下去,如下实例: 实例 #!/usr/bin/python # -*- coding: UTF-8 -*- var = 1 while v ...

  6. C#判断窗体是否打开,并获取聚焦、未打开则新建一个子窗体

    在桌面程序开发会遇到的情况,托盘功能或者是小功能弹窗问题: 现有一个主窗体有子窗体 子窗体每个都可以新建其他窗体问题:新建子窗体时怎么判断子窗体是否打开?若子窗体打开则置顶获取焦点.若未打开则新建一个 ...

  7. C++内存分配Arena，指的是提前分配的一大块连续内存空间

    参考: https://stackoverflow.com/questions/12825148/what-is-the-meaning-of-the-term-arena-in-relation-t ...

  8. Vulnhub 靶场 BEELZEBUB: 1

    Vulnhub 靶场 BEELZEBUB: 1 前期准备 靶机地址:https://www.vulnhub.com/entry/beelzebub-1,742/ kali攻击机ip:192.168.1 ...

  9. docker和常用的中间件安装汇总

    一.背景:近期整理环境,汇总了下docker 安装常用的中间件,方便我们自己搭建个人的开发环境,做个记录 1.首先是docker 本身(centos)的安装: # 旧版本卸载 sudo yum rem ...

  10. call与apply的区别与共同点

    call与apply区别 共同点:都会立即执行函数 call:是以逗号为间隔,传递多个参数 apply:是以数组来进行传递多个参数