样式的优先级

多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

一般情况下,优先级如下:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

1.  内联样式表的权值最高 1000;

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1

CSS 优先级法则:

A  选择器都有一个权值,权值越大越优先;

B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

D  继承的CSS 样式不如后来指定的CSS 样式;

E  在同一组属性设置中标有“!important”规则的优先级最大;示例如下:

CSS 优先级法则的更多相关文章

  1. css 优先级 机制

    多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...

  2. CSS优先级总结(转载)

    样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...

  3. css优先级汇总

    原文:css优先级汇总 我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴 ...

  4. css选择器及css优先级

    三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...

  5. 关于CSS的优先级,CSS优先级计算

    原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...

  6. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  7. css优先级和层叠

    css优先级和层叠 1.优先级    计算方法:        a.行内样式        b.id选择器的数量        c.类,伪类和属性选择器的数量        d.标签选择器和伪元素选择 ...

  8. 使用background和background-image对CSS优先级造成影响

    在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  9. CSS优先级算法是如何计算?

    CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...

随机推荐

  1. Linux基础篇之FTP服务器搭建(一)

    一.配置网络可以访问互联网(没有条件的可以提前下载相关版本的依赖包(也叫安装包,以下统称依赖包)上传到系统中也可以). 二.检查系统中是否存在相关的依赖包. 没有返回信息,说明系统中不存在相关的依赖包 ...

  2. java——spring中bean的作用域

    文章:理解Spring框架中Bean的作用域 博客地址:https://baijiahao.baidu.com/s?id=1610298792072480906&wfr=spider& ...

  3. JavaScript教程——this 关键字

    简单说,this就是属性或方法“当前”所在的对象. 原文地址:https://wangdoc.com/javascript/oop/this.html

  4. esxi克隆虚拟机

    1.->选中虚拟机->导出(需要关闭虚拟机电源) 此时会下载下两个文件: 2.新建虚拟机 ->从OVF或OVA文件部署虚拟机 然后创建虚拟机,选择第二项 然后填入新虚拟机名称,并把下 ...

  5. Mybatis中运用小技巧 trim标签的使用

    作者:death05的博客推荐:路在脚下trim元素的主要功能是可以在自己包含的内容钱加上某些前缀,也可以在其后加上某写后缀,与之对应的属性是prefix和suffix: 可以把包含内容的首部某些内容 ...

  6. ACM-ICPC 2018 青岛赛区网络预赛 J. Press the Button(数学)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4056 题意:有一个按钮,时间倒计器和计数器,在时间[0,t]内, ...

  7. jQuery+masonry实现瀑布流

    增加jQuery组件 <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js "></script&g ...

  8. Python 练习实例1

    Python 练习实例1 题目:有四个数字:1.2.3.4,能组成多少个互不相https://www.xuanhe.net/同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都 ...

  9. nextAll([expr]) 查找当前元素之后所有的同辈元素。

    nextAll([expr]) 概述 查找当前元素之后所有的同辈元素. 可以用表达式过滤 参数 exprStringV1.2 用来过滤的表达式 示例 描述: 给第一个div之后的所有元素加个类直线电机 ...

  10. git log/show/HEAD step(2)

    git log can see all commit log #git logcommit 2737cfa37f81810072f074dcf19964be0a5eea2e (HEAD -> m ...