css系列,选择器权重计算方式
CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器),
属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等。
在CSS中,权重决定了哪些CSS规则生效,浏览器按如下规则进行CSS权重计算
1000:内联样式
0100:ID选择器
0010:类,伪类,属性选择器
0001:元素,伪元素,通配符,子选择器,相邻选择器等
无:继承样式
浏览器通过对元素上的CSS规则进行权重计算,权重高的规则将生效,如果权重相同则最后的规则生效,
而使用的important的规则将具备最高权重,如果多条规则有important,同样是最后的规则生效。
css系列,选择器权重计算方式的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS 选择器权重计算规则(转)
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS选择器权重计算
CSS各种选择器的权重: 1.ID选择器 +100 2.类.属性.伪类选择器 +10 3.元素.伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id ...
- CSS 导入-选择器-权重
CSS 导入-选择器 Cascading Style Sheets 层叠样式表 它用来控制网页样式,并允许将样式代码与网页内容分离的一种标记性语言 CSS语法结构 选择器 声明{} 属性名:属性值 c ...
- 浏览器+css基础+选择器+权重+匹配规则
浏览器的组成: shell+内核 shell:用户能看得到的界面就叫shell 内核:渲染rendering引擎和js引擎 现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维 CSS ...
- CSS系列------选择器和选择器的优先级
1.1.基本选择器 通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...
- CSS选择器权重计算规则
从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important ...
- 对CSS了解-选择器权重
<style type="text/css"> div.ui_infor p {font-size: 16px;} .ui_infor p {font-size: 14 ...
随机推荐
- 关于axios 的responseType类型的设置
responseType值的类型可为如下 axios请求下载导出一个文件,请求成功时返回的是一个流形式的文件,需要设置responseType: 'arraybuffer',但是请求失败的需要返回的是 ...
- Oracle 11G单机 无网络环境静默安装
参考文章https://blog.csdn.net/xiaoyu19910321/article/details/89856514 环境centos 7.6最小化安装 1,关闭防护墙selinux,配 ...
- VMware软件虚拟机不能全屏的问题 & CentOS 安装Vmware Tools
修改设置 1) 如下图右单击虚拟机名,选择[settings-],调出虚拟机设置界面. 2) 在设置界面选择[hardware]->[CD/DVD2(IDE)]->[Connection] ...
- storm提交拓扑报错processing getcomponentpendingprofileactions
storm提交新的拓扑,拓扑能提交成功,但是在UI界面查看时每个bolt报错Thrift.processing getComponentPendingProfileActions异常. 原因:stor ...
- SpringCloud升级之路2020.0.x版-32. 改进负载均衡算法
本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 在前面一节,我们梳理了实现 Feign 断路器以及线程隔离的思路,这一节,我们先不看如何源 ...
- PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilder,阿里MAVEN仓库地址更新为了https问题
http://maven.aliyun.com/nexus/content/groups/public/,仓库地址更新为了https,所以下载时需要ssl认证,我们可以忽略ssl检查导致的问题,我们可 ...
- Part 27 Remove # from URL AngularJS
There are 4 simple steps to remove # from URLs in Angular. Step 1 : Enable html5mode routing. To do ...
- 通过实现仿照FeignClient框架原理的示例来看清FeignClient的本质
前言 FeignClient的实现原理网上一搜一大把,此处我就不详细再说明,比如:Feign原理 (图解) - 疯狂创客圈 - 博客园 (cnblogs.com),而且关于FeignClient的使用 ...
- Java学习(二十二)
学了一个在css中叫font的样式: 感觉还是挺好用的 不过要注意如果把font放在最后,其他会使用默认值,可能会覆盖掉前面的 例如新学的行高 在font中语法是 font:30px/40px &qu ...
- Unity——有限状态机FSM修改
FSM状态机改 一.前言 FSM状态机初版 之前写过一版有限状态机,后来发现很多问题: 前一个版本是记录了当前的状态,切换状态时,要等下一帧状态机Update的时候才会调动上个状态的退出,总会有一帧的 ...