样式优先级

CSS优先级即是指CSS样式在浏览器中被解析的权重不同。

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下所示：

选择器的优先级

CSS选择器的优先级如下所示。

内联样式表的权值最高为 1000；id 选择器的权值为 100；class 类选择器的权值为 10；html 标签选择器的权值为 1 ；

总结

权值越大越优先
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的默认样式；
继承的CSS 样式权值小于后来指定的CSS 样式；
在同一组属性设置中标有“!important”规则的优先级最大；

详细解读CSS优先级——Web前端系列学习笔记相关推荐

入门响应式Web？看懂这篇文章就够了！——Web前端系列学习笔记
文章目录视口基础知识视口概念视口基本属性 meta 标签视口应用实例媒体查询基础知识媒体查询概念 demo1-媒体查询 demo1效果百分比布局百分比布局概述 demo2-百分比布局 ...
【详细解读】CSS渐变用法——Web前端系列学习笔记
文章目录线性渐变属性解析实例代码效果图径向渐变属性解析示例代码效果图多学一招:重复渐变线性渐变属性解析通过关键词来确定渐变的方向.默认值为top(从上向下),取值范围是 [le ...
CSS过渡属性transitions详细解读——Web前端系列学习笔记
文章目录 transition teansition-property 属性名称 transtion-duration 花费时间 transition –timing -function 时间曲线 t ...
详细解读CSS链接属性——Web前端系列学习笔记
在实际开发中,网页中的链接有四种状态,具体如下所示: a:link:超级链接的初始状态. a:hover:把鼠标放上去时悬停的状态 . a:active :是鼠标点击时. a:visited:是访问过 ...
保姆级解读！CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记
文章目录 transfrom 2D转换案例代码效果图元素变形原点 3D转换 3D转换--案例案例代码 transfrom transform,翻译成中文的含义是"改变,使-变形:转换 ...
【详解】CSS阴影用法——Web前端系列学习笔记
3. CSS阴影和渐变盒阴影对象选择器 {box-shadow:投影方式|| X轴偏移量|| Y轴偏移量 ||阴影模糊半径 || 阴影扩展半径 ||阴影颜色 } 投影方式:此参数是一个可选值,如果 ...
详解CSS三大特性之层叠性、继承性和重要性——Web前端系列学习笔记
1. CSS层叠性 CSS层叠性就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,示例代码 ...
入门JavaScript？看懂这篇文章就够了！——Web前端系列学习笔记
文章目录 JavaScript简介什么是JavaScript? JavaScript的构成 JavaScript特点 JavaScript基础知识 JavaScript的引入方式 1. 将JS代码嵌 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...

详细解读CSS优先级——Web前端系列学习笔记

文章目录

样式优先级

选择器的优先级

总结

详细解读CSS优先级——Web前端系列学习笔记相关推荐

最新文章

热门文章