web进阶之五：优先级（权重）
2018-09-09 本文已影响37人
甚得朕心
首先思考一个问题？
如果一个元素同时满足了多个选择器，哪个样式生效。
如：
- body h1
- h1
上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一 致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式， 这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式， 权重又是如何计算的呢？
权重的计算
不同的选择器有不同的权重值：
- 内联样式：权重是 1000
- id选择器：权重是 100
- 类、属性、伪类选择器：权重是 10
- 元素选择器：权重是 1
- 通配符：权重是 0
- 继承的样式，没有优先级
计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的优先级</title>
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
/*
当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这时样式之间产生了冲突，
最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示
优先级的规则
当选择器中包含多种选择器时，需要将多种选择器的优先级相加，然后再比较
但是注意，选择器优先级计算不会超过他的最大的数量级
如果选择器的优先级一样，则使用靠后的样式
并集选择器的优先级是单独计算的
div, p, #p1, .hello{}
可以在样式的最后添加一个!important，则此时该样式将会获取一个最高的优先级，将会优先于所有的样式显示，
甚至超过内联样式，但是在开发中，尽量避免使用!important
*/
*{
font-size: 50px;
}
p{
font-size: 30px;
}
.p3{
color: green;
}
.p1{
color: yellow;
background-color: skyblue !important;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: orange;">
我是一个段落
<span>我是p标签中的span</span>
</p>
</body>
</html>
上面这个代码大家可以思考一下，最后出现的效果是什么样子的。
