HTML选择器的权重(优先级)
选择器的优先级主要用于样式发生冲突的情况下
选择器范围越小,优先级越高
行内样式>id选择器>类选择器>标签选择器>通用选择器
这里涉及一个权重值的问题,权重值越高,优先级越大
权重值
HTML分别为每种类型选择器分配了一个权值:
(1)通用选择器
权重值:0
(2)标签选择器
权重值:1
(3)类选择器
权重值:10
(4)ID选择器
权重值:100
(5)行内样式
权重值:1000
权重值的计算:
权值的计算很简单,直接看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{color: yellow;}/*1*/
div a{color: green;}/*1+1*/
.demo a{color: black;}/*10+1*/
#demo a{color: orange;}/*100+1*/
div#demo a{color: red;}/*1+100+1*/
</style>
</head>
<body>
<a href="">this is 黄色</a>
<div class="demo">
<a href="">this is 黑色</a>
</div>
<div id="demo">
<a href="">this is 红色</a>
</div>
</body>
</html>
运行结果:
自己在编译器敲敲就懂了
HTML选择器的权重(优先级)的更多相关文章
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- css三大特性 & 选择器的权重
层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性. 覆盖性原则: 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标 ...
- css样式权重优先级,css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- css:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器
最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...
- css复合选择器的权重
选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...
- HTML+css基础 css选择器 选择器的权重
css选择器 选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
- CSS选择器整理以及优先级介绍
一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...
- 常见CSS选择器的权重和优先级
一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...
- css选择器有哪些,选择器的权重的优先级
选择器类型 1.ID #id 2.class .class 3.标签 p 4.通用 * 5.属性 [type="text"] 6.伪类 :hover 7.伪元素 ::first-l ...
随机推荐
- 五:HttpServletResponse对象
一.HttpServletResponse对象介绍 HttpServletResponse对象代表服务器的响应.这个对象中封装了向客户端发送数据.发送响应头,发送响应状态码的方法.查看HttpServ ...
- Mybatis(二)——全局配置文件
一.在正文上方直接添加目录. 1.二级标题***申请开通js权限 2.添加js脚本到页脚Html代码 数组:采用一段连续的存储单元来"存储"数据.对于"指定下标" ...
- 【SpringMVC】完全注解配置SpringMVC
创建初始化类,代替web.xml 在Servlet3.0环境中,容器会在类路径中查找实现javax.servlet.ServletContainerInitializer接口的类,如果找到的话就用它来 ...
- MongoDB(10)- 查询嵌套文档
插入测试数据 db.inventory.insertMany( [ { item: "journal", qty: 25, size: { h: 14, w: 21, uom: & ...
- MySQL高级语句(二)
目录: 1.别名 2.子查询 3.EXISTS 4.连接查询 5.CREATE VIEW 视图 6.UNION 联集 7.交集值 8.无交集值 9.CASE 10.算排名 11.算中位数 12.算累积 ...
- angularjs 文件上传
github连接地址:https://github.com/danialfarid/ng-file-upload 核心代码: html: <div class="form-group& ...
- ClickOnce手动更新
if (ApplicationDeployment.IsNetworkDeployed == true) { ApplicationDeploy ...
- netty系列之:在netty中处理CORS
目录 简介 服务端的CORS配置 CorsConfigBuilder CorsHandler netty对cors的支持 总结 简介 CORS的全称是跨域资源共享,他是一个基于HTTP-header检 ...
- 关于PHP数组Key的强制类型转换
PHP是弱类型语言,就像JavaScript一样,在定义变量时,不需要强制指定变量的类型.同时,PHP又有着强大的数组功能,数组的Key即可以是普通的数字类型下标,也可以是字符串类型的Hash键值,那 ...
- php处理url的rawurlencode:可处理空格加号
(PHP 4, PHP 5, PHP 7) rawurlencode - 按照 RFC 3986 对 URL 进行编码 返回字符串,此字符串中除了 -_. 之外的所有非字母数字字符都将被替换成百分号( ...