浅谈CSS样式权值

网络
心事如莲，心静如水。驾一叶轻舟，吹一支长笛，自池塘深处，揽一朵莲花入怀，似红粉佳人，晶莹剔透，亭亭玉立，娇俏动人，喜一分，爱一分，怜一分，朵朵幽香入心田，丝丝柔情潜心底。

内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet)

例外：但如果外部样式表放在内部样式表下边引用,则外部样式表>内部样式表;

1,内联样式表权值为1000;

2,ID选择器的权值为100;

3,Class类选择器的权值为10;

4,HTML标签选择器的权值为1;

具体代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>CSS样式权值</title>
  6. <style>
  7. body{
  8. font-size:20px;
  9. font-weight:900;
  10. }
  11. h3{
  12. color:yellow;
  13. }
  14. #redPp{
  15. /*权值100+1=101*/
  16. color:#f00;
  17. /*红色*/
  18. }
  19. #redPp.redem{
  20. /*权值100+1+10+1=112*/
  21. color:#00f;
  22. /*蓝色*/
  23. }
  24. #redP.redem{
  25. /*权值100+10+1=111*/
  26. color:#0ff;
  27. /*亮蓝色*/
  28. }
  31. #redPpspanem{
  32. /*权值100+1+1+1=103*/
  33. color:#ff0;
  34. /*黄色*/
  35. }
  36. </style>
  37. <linkrel="stylesheet"rel="nofollow noopener noreferrer" href="style.css">
  38. </head>
  39. <body>
  40. <h3>例外:外部样式表>内部样式表</h3>
  41. <divid="redP">
  42. <pclass="red">
  43. <span>
  44. <em>emred</em>
  45. </span>
  46. </p>
  47. <p>red</p>
  48. </div>
  49. </body>
  50. </html>

以上这篇浅谈CSS样式权值就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例