选择器的优先级

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.p1 {background-color: yellow;}p {background-color: red;}* {font-size: 50px;}p {font-size: 30px;}#p2 {background-color: yellowgreen;}p#p2 {background-color: red;}.p3 {color: green;}.p1 {color: yellow;background-color: greenyellow !important;}</style></head><body><p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落<span>我是p标签中的span</span></p></body>
</html>

1. 说明

当使用不同的选择器，选中同一个元素时并且设置相同的样式时
这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级(权重)决定
优先级高的优先显示。

2. 优先级的规则

内联样式，优先级 1000

<p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落</p>

id 选择器，优先级 100

#p2 {background-color: yellowgreen;
}

类和伪类，优先级 10

.p3 {color: green;
}

元素选择器，优先级 1

p {font-size: 30px;
}

通配*，优先级 0

* {font-size: 50px;
}

继承的样式，没有优先级

<p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落<span>我是p标签中的span</span>
</p>

3. 优先级比较

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，
但是注意，选择器的优先级计算不会超过他的最大数量级
如果选择器的优先级一样，则使用靠后的样式

p#p2 {background-color: red;
}

并集选择器的优先级是单独计算的
div , p , #p1 , .hello{}

4. !important

可以在样式的最后，添加一个!important，则此时该样式将会获得最高的优先级，
将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important

.p1 {color: yellow;background-color: greenyellow !important;
}

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-选择器的优先级

文章目录

选择器的优先级

1. 说明

2. 优先级的规则

3. 优先级比较

4. !important

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

最新文章

热门文章