CSS 选择器的优先级

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

!important > 行内样式 > ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性

选择器越具体，其优先级越高

// HTML<div id="test"><span>Text</span>
</div>

// CSSdiv#test span { color: green; }
div span { color: blue; }
span { color: red; }

无论 CSS 语句的顺序是什么样的，文本都会是绿色的（green），其次蓝色（blue），最后红色（red）。查看Demo

相同优先级，出现在后面的，覆盖前面的

// HTML<div class="green blue red"><span>Text</span>
</div>

// CSS.green {color: green;
}
.blue {color:blue;
}
.red {color:red
}

根据顺序规则，Text 颜色为红色。查看Demo

属性后面加 !important 的优先级最高，但是要少用

//HTML<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

// CSS#winning {background-color: red;border: 1px solid black;
}.better {background-color: gray;border: none !important;
}p {background-color: blue;color: white;padding: 5px;
}

两个元素都有 class，第二个元素有 id。border 有 !important。因此，第一个元素为灰色背景无边框，第二个元素红色背景无边框。查看Demo

CSS 选择器的优先级相关推荐

详解CSS选择器、优先级与匹配原理
选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签内写入style=""的 ...
CSS选择器的优先级的相关介绍
css选择器的优先级使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示优先级规则(权重值 ...
【CSS笔记】CSS选择器的优先级（权重）
目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...
CSS选择器的优先级是怎样的？
CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器到具体的计算层面,优先级是由 A .B.C.D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 ...
css选择器的优先级
1. 引言选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到 ...
[转]《精通css》笔记1：css选择器与优先级
本文转自:http://www.cnblogs.com/webmoon/archive/2012/12/02/2798183.html css选择器一.基础选择器 css基础选择器有标签选择器.类选 ...
css选择器的优先级和权重问题
CSS选择器的种类: 1.id选择器如:(id="name",id="name_txt)(*name) 2.class选择器(如:class="head&quo ...
一张图搞定CSS选择器的优先级
0 总览如果发生CSS的冲突问题, 即A样式与B样式冲突 1 首先比较CSS样式的来源不同的来源有不同的优先级如果来源相同, 即同源时, 则进入下一阶段2 比较是否为内联样式如果A样式与B样式同源, ...
CSS——选择器及优先级
一.CSS选择器的种类标签选择器:div 类选择器:.container id选择器:#child1 后代选择器:.container div,表示container类里面的所有div标签子选择器 ...
css选择器的优先级，以及用法
目录前言一.css选择器二.css选择器优先级排序三.css选择器的总结 1. !important 2.内联选择器 3.id选择器 4.类别选择器 5.属性选择器(内容较多) 6.伪类选择 ...

CSS 选择器的优先级

选择器越具体，其优先级越高

相同优先级，出现在后面的，覆盖前面的

属性后面加 !important 的优先级最高，但是要少用

CSS 选择器的优先级相关推荐

最新文章

热门文章