CSS优先级
当样式的覆盖发生冲突时,以优先级高的为准。样式覆盖发生冲突常见的共有以下五种情况。
- 引用方式冲突
- 继承方式冲突
- 指定样式冲突
- 继承样式和指定样式冲突
- !important
引用方式冲突
优先级:
行内样式 > (内部样式 = 外部样式)
如果内部样式与外部样式同时存在,则以最后引入的样式为准(后者居上)。
继承样式冲突
如果由于继承方式引起的冲突,则“最近的祖先元素”获胜。
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>example1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#grandfather{
color: yellow;
}
#father{
color:aqua;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div>
这是一个儿子元素,继承了最近祖先father的颜色属性。
</div>
</div>
</div>
</body>
</html>
指定样式冲突
所谓的指定样式,指的是“当前元素”的样式。当直接制定样式发生冲突时,样式权值高者获胜。
在CSS中,各种选择器的权值如下表:
选择器 | 权值 |
---|---|
通配符(*) | 0 |
伪元素 | 1 |
元素选择器 | 1 |
class 选择器 | 10 |
伪类 | 10 |
属性选择器 | 10 |
id选择器 | 100 |
行内样式 | 1000 |
注:常见的伪元素只有四个,即::before
,::after
,::first-letter
,first-line
。伪类我们经常见到,如:
:hover
,:first-child
等。
Example2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example2</title>
<style type="text/css">
#test{
color:orange;
}
.test{
color: greenyellow;
}
div{
color:grey;
}
</style>
</head>
<body>
<div id="test",class="test">id 选择器的优先级最高,所以显示橙色</div>
</body>
</html>
注意:我们不应该只从样式顺序来判断。因为只有选择器权重相同时,才会遵从”后来者居上”原则。
继承样式和指定样式冲突
当继承样式和指定样式发生冲突时,指定样式获胜。
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>example1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#grandfather{
color: yellow;
}
#father{
color:aqua;
}
#son{
color:gray;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div id="son">
指定样式指的是当前元素的样式,当前元素是div,id=”son“,所以此时现实的是id=”son"的样式。
</div>
</div>
</div>
</body>
</html>
!important
这种方法会强制改变样式的优先级,很不建议使用,所以在这里也不作讲解。