-
当使用不同的选择器选中同一个元素时,并且设置相同的样式时
* 这是样式之间产生冲突,最终采用哪个选择器定义的样式,由选择器
* 的优先级(权重)决定,优先级高的优先显示.
* -
优先级规则
* 内联样式,优先级1000
* id选择器,优先级100
* 类和伪类,优先级10
* 元素选择器,优先级1
* 通配*,优先级0
* 继承样式,没有优先级 -
可以在样式的最后,添加一个important,则改样式将会获得一个最高优先级
将会优先于内联样式显示,但是开发过程中不建议使用* 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较 * 但是,选择器的优先级计算不会超过最大的数量级 * * 如果选择器的优先级相同.优先选择靠后的样式 * * 并集选择器的优先级是单独计算的 * div,p,#p1,.hello{}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
/*
* 当使用不同的选择器选中同一个元素时,并且设置相同的样式时
* 这是样式之间产生冲突,最终采用哪个选择器定义的样式,由选择器
* 的优先级(权重)决定,优先级高的优先显示.
*
* 优先级规则
* 内联样式,优先级1000
* id选择器,优先级100
* 类和伪类,优先级10
* 元素选择器,优先级1
* 通配*,优先级0
* 继承样式,没有优先级
*
* 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较
* 但是,选择器的优先级计算不会超过最大的数量级
*
* 如果选择器的优先级相同.优先选择靠后的样式
*
* 并集选择器的优先级是单独计算的
* div,p,#p1,.hello{}
*
* 可以在样式的最后,添加一个important,则改样式将会获得一个最高优先级
* 将会优先于内联样式显示,但是开发过程中不建议使用
*/
*{
font-size: 50px;
}
p{
font-size: 30px;
}
p#p{
background-color: red;
}
.p1{
color: green;
}
.p3{
color: yellow;
background-color: gold !important;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: skyblue;">我是一个p标签
<span>我是p标签中的span</span>
</p>
</body>
</html>
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
