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，但是优先级大于继承样式优先级。++

优先级算法示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        a{color: yellow;} /*特殊性值：0,0,0,1*/

        div a{color: green;} /*特殊性值：0,0,0,2*/

        .demo a{color: black;} /*特殊性值：0,0,1,1*/

        .demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/

        .demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/

        #demo a{color: orange;} /*特殊性值：0,1,0,1*/

        div#demo a{color: red;} /*特殊性值：0,1,0,2*/

    </style>

</head>

<body>

    <a href="">第一条应该是黄色</a>

    <div class="demo">

        <input type="text" value="第二条应该是蓝色" />

        <a href="">第三条应该是黑色</a>

    </div>

    <div id="demo">

        <a href="">第四条应该是红色</a>

    </div>

</body>

</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. 《Dotnet9》系列-开源C# WPF项目1《Accelerider.Windows》强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  2. C#获取字符串的拼音和首字母

    在C#中我们想要获取字符串的拼音并不是那么困难的,在网上看到很多都是特别笨的方式来实现,其实各有各的好处吧,如果使用了下方法方式,它不知道多音字,这就是一个问题. /// <summary> ...

  3. AOP框架Dora.Interception 3.0 [3]: 拦截器设计

    对于所有的AOP框架来说,多个拦截器最终会应用到某个方法上.这些拦截器按照指定的顺序构成一个管道,管道的另一端就是针对目标方法的调用.从设计角度来将,拦截器和中间件本质是一样的,那么我们可以按照类似的 ...

  4. Hadoop_MapReduce_03

    1. MapReduce入门 1.1 MapReduce的思想 MapReduce的思想核心是"分而治之" , 适用于大量的复杂的任务处理场景 (大规模数据处理场景) . Map负 ...

  5. 数据结构学习--单链表(python)

    概念 链表(linked_list)是物理存储单元上非连续的.非顺序的存储结构,数据元素的逻辑顺序 是通过链表的指针地址实现,每个元素包含两个结点,一个是存储元素的数据域 (内存空间) ,另一个是指向 ...

  6. springboot 读取 resource 下的文件

    ClassPathResource classPathResource = new ClassPathResource("template/demo/200000168-check-resp ...

  7. 【30天自制操作系统】day05：结构体、文字显示与 GDT/IDT 初始化

    输出一个 16 行 8 列的点阵字符 void putfont8(char *vram, int xsize, int x, int y, char c, char *font) { int i; c ...

  8. laravel 框架源码分析

    laravel框架的文档中的例子很多时候不是很明显,所以想要真正的使用好这个框架,我们可以尝试去阅读它源码中的注释(不得不说laravel源码的注释还是很详细的). 我们先来看一下laravel 的文 ...

  9. 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU启动那些事（1）- Boot简介

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的BootROM功能简介. 截止目前为止i.MX RTyyyy系列已公布的芯片有三款i.MXRT ...

  10. doPost()和doGet()方法的区别？

    GET和POST请求都是http的请求方式,用户通过不同的http的请求方式完成对资源(url)的不同操作.GET,POST,PUT,DELETE就对应着对这个资源的查 ,改 ,增 ,删 4个操作,具 ...