CSS样式（选择器）的优先级

第一优先级：无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
第一等：内联样式，如：style="color:red;"，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
第二等：ID选择器，如：#header，权值为0100.
第三等：类选择器、如：.bar，权值为0010.
第四等：类型（标签）选择器和伪元素选择器，如：div ::first-line 权值为0001.
通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
继承的样式没有权值。

CSS选择器的优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他

<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><body><a href="">第一条应该是黄色</a> <!-适用第1行规则-><div class="demo"><input type="text" value="第二条应该是蓝色" /><!-适用第4、5行规则，第4行优先级高-><a href="">第三条应该是黑色</a><!-适用第2、3行规则，第3行优先级高-></div><div id="demo"><a href="">第四条应该是红色</a><!-适用第5、6行规则，第6行优先级高-></div>
</body>

原文：

1.2.1 CSS基础 · 前端工程师面试宝典

CSS样式（选择器）的优先级相关推荐

CSS样式选择器的优先级顺序
样式(css)是一种按照优先级来进行加载的语言. css各种选择器的优先级顺序:(由上到下,优先级顺序依次降低) 不同级别: 1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
css样式引入的优先级
css样式引入的优先级 1 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权. 2.第二级的优先属性由位于 <style/>标签中的 @ ...
CSS基本选择器及优先级顺序
CSS选择器是编写CSS代码时的一个核心概念,我们在设计网页页面时,使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.而HTML页面中的元素就是通过CSS选 ...
html的css样式中表示后代选择器,html添加css——样式选择器
如何给html添加样式.两种方法:css 1.新创建一个css样式表,与原html同目录,而后经过link标签连接.如:(link标签是一个void元素,无结束标签.)html 2.直接在html源码 ...
三种css样式表及其优先级
1.行内样式 body内: <p style="text-indent: 2em;color: red"> 我是行内样式 </p> 2.内部样式表 body ...
详解css样式处理的优先级
想要对一个标签处理它的样式,可以用 class="" 的方式来定义它的类,然后在类中处理他的样式例如: <style>.box{width:100px;height: ...
css样式选择器的种类及区别
每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指明了{}中的"样式" ...
CSS样式定义的优先级顺序总结
转载自:https://blog.csdn.net/judyge/article/details/51788691 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内 ...
HTMLCSS————CSS常用选择器及优先级
选择器优先级内联样式(1000)> id选择器(100)> 类和伪类选择器(10) > 元素选择器(1)>通配 * 选择器(0)> 继承的样式一.元素选择器作用:通 ...

CSS样式（选择器）的优先级

CSS样式（选择器）的优先级相关推荐

最新文章

热门文章