【转载】https://blog.csdn.net/QingyingLiu/article/details/82084329
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
运行效果 指定样式冲突所谓的指定样式，指的是“当前元素”的样式。当直接制定样式发生冲突时，样式权值高者获胜。 在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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
运行效果 注意:我们不应该只从样式顺序来判断。因为只有选择器权重相同时，才会遵从”后来者居上”原则。 继承样式和指定样式冲突当继承样式和指定样式发生冲突时，指定样式获胜。 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
运行效果 !important这种方法会强制改变样式的优先级，很不建议使用，所以在这里也不作讲解。
| 
收藏
淘帖
踩
