search

博客列表 >实例演示css选择器及权重计算

实例演示css选择器及权重计算

千里马遇伯乐
千里马遇伯乐原创
2022年03月22日 15:28:17729浏览

css的权重计算方式

ID class tag
百 十 个

css部分

  1.      <style>
  2.     .item{
  3.     color: red;
  4. }
  5.          #id为0，class为1，tag为0，计算结果为（0，1，0）
  6.        /* 1,id 具有唯一性，尽量少用或者不用 */
  8.        /* 2， !important使用时权重最高，方便代码调试时使用 */
  9.        /* 3，权重相同的情况下后面的样式会覆盖前面的样式。 */
  10.         </style>

HTML部分

  1.         <body>
  2.           <h1 class="item">hello</h1>
  3.     </body>

伪类元素实例

  1. /* 关系式：:nth-of-type(an+b)
  2.            其中a与b为人为赋值，n为自增函数（0，1，2，3....）
  3.            .（a为系数，b为偏移量）
  5.           /* 偶数行实现 */
  6. .list>li:nth-last-of-type(even){
  7.     background-color: green;
  8. }
  9. /* 奇数行实现 */
  10. .list>li:nth-last-of-type(odd){
  11.     background-color: royalblue;
  12.  }

奇数偶数图例

奇数偶数图

  1.      /* 选中第5个及前面的所有元素 */
  2.  .list>li:nth-of-type(-n+5){
  3.      color: yellow;
  4.  }
  5. /* 选中第6个及后面的所有元素 */
  6. .list>li:nth-of-type(n+6){
  7.     color: red;
  8. }

第5，6图例

  1.         /* 始终会选择第1个元素 */
  2.     .list>li:nth-of-type(1){
  3.         background-color: red;
  4.     }
  5.     /* 始终会选择倒数第3个元素 */
  6. .list>li:nth-last-of-type(3){
  7.     background-color: firebrick;
  8. }

1，3图例

HTML部分

  1.      <body>
  2.      <ul class="list">
  3. <li>a1</li>
  4. <li>a2</li>
  5. <li>a3</li>
  6. <li>a4</li>
  7. <li>a5</li>
  8. <li>a6</li>
  9. <li>a7</li>
  10. <li>a8</li>
  11. <li>a9</li>
  14.    </ul>
  15. </body>
上一条：ubuntu21.10搭建jenkins和gitlab自动化部署环境下一条：选择器的权重\伪类选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多