博客列表 >选择器权重的计算过程

选择器权重的计算过程

江流
江流原创
2021年09月23日 18:17:46426浏览
  • 优先级 : !important > style> id> class > tag
  1. <body>
  2. <div>
  3. <ul id="nav" class="nav">
  4. <li>item1</li>
  5. <li>item2</li>
  6. <li>item3</li>
  7. <li>item4</li>
  8. <li>item5</li>
  9. </ul>
  10. </div>
  11. <style>
  12. ul {
  13. background-color: crimson;
  14. color: snow;
  15. }
  16. </style>
  17. </body>

  1. <body>
  2. <div>
  3. <ul id="nav" class="nav">
  4. <li>item1</li>
  5. <li>item2</li>
  6. <li>item3</li>
  7. <li>item4</li>
  8. <li>item5</li>
  9. </ul>
  10. </div>
  11. <style>
  12. div ul {
  13. background-color: darkorange;
  14. }
  15. ul {
  16. background-color: crimson;
  17. color: snow;
  18. }
  19. </style>
  20. </body>

  1. <body>
  2. <div>
  3. <ul id="nav" class="nav">
  4. <li>item1</li>
  5. <li>item2</li>
  6. <li>item3</li>
  7. <li>item4</li>
  8. <li>item5</li>
  9. </ul>
  10. </div>
  11. <style>
  12. div .nav {
  13. background-color: indigo;
  14. }
  15. div ul {
  16. background-color: darkorange;
  17. }
  18. ul {
  19. background-color: crimson;
  20. color: snow;
  21. }
  22. </style>
  23. </body>

  1. <body>
  2. <div>
  3. <ul id="nav" class="nav">
  4. <li>item1</li>
  5. <li>item2</li>
  6. <li>item3</li>
  7. <li>item4</li>
  8. <li>item5</li>
  9. </ul>
  10. </div>
  11. <style>
  12. div #nav {
  13. background-color: lightcoral;
  14. }
  15. div .nav {
  16. background-color: indigo;
  17. }
  18. div ul {
  19. background-color: darkorange;
  20. }
  21. ul {
  22. background-color: crimson;
  23. color: snow;
  24. }
  25. </style>

  1. <body>
  2. <div>
  3. <ul id="nav" class="nav" style="background-color: teal">
  4. <li>item1</li>
  5. <li>item2</li>
  6. <li>item3</li>
  7. <li>item4</li>
  8. <li>item5</li>
  9. </ul>
  10. </div>
  11. <style>
  12. div #nav {
  13. background-color: lightcoral;
  14. }
  15. div .nav {
  16. background-color: indigo;
  17. }
  18. div ul {
  19. background-color: darkorange;
  20. }
  21. ul {
  22. background-color: crimson;
  23. color: snow;
  24. }
  25. </style>
  26. </body>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议