search

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

选择器权重的计算过程

江流
江流原创
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>

上一条：表单元素、选择器权重以及上下文选择器实战下一条：Visual Studio Code编辑器（简称vscode）及相关常用扩展的安装及配置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多