css样式的优先级分为引入优先级和声明优先级。

引入优先级

引入样式一般分为外部样式，内部样式，内联样式。

外部样式：使用link引入的外部css文件。

内部样式：使用style标签书写的css样式。

内联样式：直接书写在html标签里面的css样式。

优先级如下：

内联样式 > 外部样式 = 内部样式

外部样式优先级和内部样式优先级相同，故写在后面的样式会覆盖前面的样式。

声明优先级

一般优先级如下：

  • !important > 内联 > ID > Class|属性|伪类 > 元素选择器
  • :link、:visited、:hover、:active 按照LVHA顺序定义

优先级算法：

等级 内联选择器 ID选择器 类选择器/属性选择器/伪类 元素选择器
示例 <span style="color:red;"></span> #sp{color:red} .sp{color:red}
[type="text"]{color:red}
:nth-of-type(1){color:red}		 span{color:red}
优先级 1-0-0-0 0-1-0-0 0-0-1-0 0-0-0-1

注意：

**通配符 * 的优先级为 0-0-0-0，但是优先级大于继承样式优先级。++

优先级算法示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         a{color: yellow;} /*特殊性值：0,0,0,1*/
  11.         div a{color: green;} /*特殊性值：0,0,0,2*/
  12.         .demo a{color: black;} /*特殊性值：0,0,1,1*/
  13.         .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
  14.         .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
  15.         #demo a{color: orange;} /*特殊性值：0,1,0,1*/
  16.         div#demo a{color: red;} /*特殊性值：0,1,0,2*/
  17.     </style>
  18. </head>
  20. <body>
  21.     <a href="">第一条应该是黄色</a>
  22.     <div class="demo">
  23.         <input type="text" value="第二条应该是蓝色" />
  24.         <a href="">第三条应该是黑色</a>
  25.     </div>
  26.     <div id="demo">
  27.         <a href="">第四条应该是红色</a>
  28.     </div>
  29. </body>
  31. </html>

css样式优先级计算规则的更多相关文章

  1. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

  2. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  3. 强制改变css样式优先级

    .list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...

  4. css样式优先级问题

    官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 那么,我们来举个 ...

  5. css样式权重优先级，css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  6. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  7. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  8. css优先级计算规则——权重

    一.css的优先级 当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明. <style> #id{ color:red; } p{ color:blue; } < ...

  9. CSS 选择器权重计算规则

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

随机推荐

  1. Mybatis sql map 小于号配置

    Mybatis SQL map配置中出现小于号转义时,通过<![CDATA[查询条件]]>解决. EXCEMPLE: <select id="getComments&quo ...

  2. Redis主从复制架构和Sentinel哨兵机制

    一.redis主从复制原理 redis主从同步策略:slave刚加入集群会触发一次全量同步(全量复制).全量同步之后,进行增量复制.slave优先是增量同步,如果增量同步失败会尝试从master节点进 ...

  3. 剑指Offer-46.孩子们的游戏(圆圈中最后剩下的数)(C++/Java)

    题目: 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指定 ...

  4. python同步IO编程——基本概念和文件的读写

    IO——Input/Output,即输入输出.对于计算机来说,程序运行时候数据是在内存中的,涉及到数据交换的地方,通常是磁盘.网络等.比如通过浏览器访问一个网站,浏览器首先把请求数据发送给网站服务器, ...

  5. jQuery实现简单购物车页面

    功能描述: 当全选按钮被按下时,所有商品的小复选框(以及另外一个全选按钮)的选中状态跟按下的全选按钮保持一致: 当用户选中商品时,如果所有商品都被选中,就让全选按钮为选中状态: 用户可以点击 + - ...

  6. 关于MySQL注入漏洞到获取webshell

    关于PHP网站报错性注入拿shell的方法,定位到报错在某个字段上的利用方式: 条件1: 爆出了网站的物理路径 条件2:MySQL具有into outfile权限 SQL语句为: 假如字段为2: un ...

  7. html和css的基本功

    1.块级元素和行内元素和行内块元素的区别 块级元素:独占一行的,可以设置宽高和内外边距的(<div>/<h1>~<h6>/<p>/<ul>/ ...

  8. 修改HTML元素

    通过HTML DOM,JavaScript能够访问并修改HTML文档中的每个元素 修改元素文本内容 document.getElementById("p1").innerHTML= ...

  9. 源码分析RocketMQ ACL实现机制

    目录 1.BrokerController#initialAcl 2.PlainAccessValidator 2.1 类图 2.2 构造方法 2.3 parse方法 2.4 validate 方法 ...

  10. C#线程学习笔记二：线程池中的工作者线程

    本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/18/ThreadPool.html,记录一下学习过程以备后续查用. 一.线程池基础 首先,创 ...