css 之优先策略

css 之优先策略
Html代码
1. <html>
2. <head>
3. <title>testCSS</title>
4. <style type="text/css">
5. h2{
6. color:red;
7. }
8. h2{
9. color:green;
10. }
11. h3{
12. color:red;
13. }
14. h5{
15. color:green;
16. }
17. </style>
18. <link rel="stylesheet" type="text/css" href="a.css" />
19. </head>
20. <body>
21. <h1 style="color:red;color:green">1.绿色，当内联的方式定义color:red;color:green，以后面的为准，后面会把前面的覆盖</h1>
22. <h2 >2.绿色，当内联的方式定义两次颜色，以后面的为准，后面会把前面的覆盖</h2>
23. <h3 style="color:green">3.当以内联和内部样式表的方式定义，内联优先于内部样式表</h3>
24. <h4 style="color:green">4.当以内联和内部样式表的方式定义，内联优先于内部样式表,与内部样式表存放的位置无关</h3>
25. <h5>5.当内部样式表和外部样式表同时定义时，与内联样式与外部样式表定义的顺序有关，以后面为准，后面会把前面的覆盖</h5>
26. </body>
27. <style type="text/css">
28. h4{
29. color:red;
30. }
31. </style>
34. </html>
执行结果：
Html代码
1. <html>
2. <head>
3. <title>testCSS</title>
4. <style type="text/css">
5. h1{
6. color:green;
7. }
8. #h1id{
9. color:blue;
10. }
11. .h1class{
12. color:yellow;
13. }
15. #h2id h2{
16. color:blue;
17. }
18. .h2class h2{
19. color:yellow
20. }
21. div h2{
22. color:red;
23. }
24. </style>
25. </head>
26. <body>
27. 一、内联>>id选择器>>类选择器>>标签选择器 >>：表示优先的意思 <br>
28. <h1 style="color:red" id="h1id" class="h1class">1.红色内联、标签选择器、类选择器、id选择器都符合，优先内联</h1>
29. <h1 style="" id="h1id" class="h1class">2.蓝色标签选择器、类选择器、id选择器都符合，优先id选择器</h1>
30. <h1 style="" class="h1class">3.黄色标签选择器、类选择器都符合，优先类选择器</h1>
31. <h1 style="" >4.绿色最终才是标签选择器</h1>
32. 二、派生选择器依然遵守上面的规律 id派生>>类派生 >>标签派生
33. <div id="h2id" class="h2class"><h2>1.蓝色</h2></div>
34. <div class="h2class"><h2>2.黄色</h2></div>
35. <div ><h2>3.红色</h2></div>
36. </body>
40. </html>
相关阅读:
Java设计模式--命令模式
 linux 挂载windows盘
 C# 对含有向量偏移的明文进行AES加解密
 Vue修仙之旅之Vue初尝
 Cookie的Secure属性
 Webserver信息泄露的解决方案--使用StripHeaders模块删除不必要的header
window自定义事件
 vue typescript .eslintrc.js
css word-break: break-word;无效
 vscode vue 片段
原文地址：https://www.cnblogs.com/ranran/p/3852841.html