css样式优先级计算规则
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样式优先级计算规则的更多相关文章
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- 强制改变css样式优先级
.list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...
- css样式优先级问题
官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式 那么,我们来举个 ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- CSS样式优先级
关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...
- 权重和层叠规则决定了CSS样式优先级
一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...
- css优先级计算规则——权重
一.css的优先级 当对同一个元素设置相同的多个声明时,会按照优先级的高低选择应用哪种声明. <style> #id{ color:red; } p{ color:blue; } < ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
随机推荐
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- go 利用chan的阻塞机制,实现协程的开始、阻塞、返回控制器
一.使用场景 大背景是从kafka 中读取oplog进行增量处理,但是当我想发一条命令将这个增量过程阻塞,然后开始进行一次全量同步之后,在开始继续增量. 所以需要对多个协程进行控制. 二.使用知识 1 ...
- css重点知识和bug解决方法
1.图片向下撑大3像素问题 在一个盒子里面放一张图片,默认情况下,图片会向下撑大3像素,有以下几种解决方法: 1.1 给图片添加display:block: 1.2 给图片添加 float:left: ...
- 学习python这么久,有没有考虑发布一个属于自己的模块?
1. 为什么需要对项目分发打包? 平常我们习惯了使用 pip 来安装一些第三方模块,这个安装过程之所以简单,是因为模块开发者为我们默默地为我们做了所有繁杂的工作,而这个过程就是 打包. 打包,就是 ...
- 如何给div、p添加onload事件?
前提 其实只有 <body>.<frame>.<iframe>.<img>.<link>.<script>.<style& ...
- Flutter学习笔记(28)--使用第三方jar包
如需转载,请注明出处:Flutter学习笔记(28)--使用第三方jar包 1.打开一个Flutter项目,点击编码窗口右上角的Open for Editing in Android Studio,这 ...
- 参加杭州 2019 AI Bootcamp有感与总结(1)
上周末参加了微软人工智能的活动,感慨多多. 感谢活动主讲和主办方. 通过参加活动,对微软认知服务和ML.NET的现状与发展有了更多的认识.文章不是活动内容的堆叠,总结少点,更多的大概是感慨. 微软认知 ...
- SpringBoot整合jdbcTemplate
一.目录展示 二.导入依赖 三.配置文件 四.Student实体类 package com.zn.entity; public class Student { private Integer stu_ ...
- RDP矢量数据压缩算法
在绘制对象边缘时涉及到了这个算法,记录一下. 该算法递归进行,首先设定一个阈值,在点集的第一个点和最后一个点间拉一条线段,找出剩下的点集中离线段最远的一个点,如果该点到线段的距离小于阈值则舍弃中间的所 ...
- Ansible-playbook之循环判断
1.循环 (loop) # 使用循环创建硬连接:x连接到y:z连接到k: - hosts: web - name: Create two hard links file: src: "{{ ...