Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示css选择器及权重计算
Blogger Information
Blog 29
fans 0
comment 0
visits 19535
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示css选择器及权重计算
千里马遇伯乐
Original
732 people have browsed it

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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post