Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 选择器权重与常用伪类选择器的实例演示
Blogger Information
Blog 33
fans 0
comment 0
visits 17106
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
选择器权重与常用伪类选择器的实例演示
lucaslwk
Original
450 people have browsed it

选择器权重与常用伪类选择器的实例演示

1.选择器权重的实例演示

实现效果

选择器权重

关键代码

html

  1. <h1>tag生效</h1>
  2. <h1 class="class">class生效</h1>
  3. <h1 id="id" class="class">id生效</h1>

css

  1. h1 {
  2.   color: red;
  3. }
  4. h1.class {
  5.   color: green;
  6. }
  7. h1#id {
  8.   color: blue;
  9. }

计算过程

id 千位,class 百位,tag 个位

选择器 权重
h1 {color: red;} (0,0,1)
h1.class {color: green;} (0,1,0)
h1#id {color: blue;} (1,0,0)

!important: 调试样式 调试代码使用,权重最高

2. 常用伪类选择器的实例演示

1.结构伪类

实现效果

结构伪类

关键代码

  1. <style>
  2.   /* 选中第五个元素 */
  3.   .content > li:nth-of-type(5) {
  4.     color: red;
  5.   }
  6.   /* 选中第一个元素 */
  7.   .content > li:first-of-type {
  8.     color: green;
  9.   }
  10.   /* 选中最后一个元素 */
  11.   .content > li:last-of-type {
  12.     color: blue;
  13.   }
  14.   /* 选中倒数第五个元素 */
  15.   .content > li:nth-last-of-type(5) {
  16.     color: yellow;
  17.   }
  18. </style>
  19. <body>
  20.   <ul class="content">
  21.     <li>item1</li>
  22.     <li>item2</li>
  23.     <li>item3</li>
  24.     <li>item4</li>
  25.     <li>item5</li>
  26.     <li>item6</li>
  27.     <li>item7</li>
  28.     <li>item8</li>
  29.     <li>item9</li>
  30.     <li>item10</li>
  31.   </ul>
  32. </body>

2.结构伪类参数

实现效果

结构伪类参数

关键代码

  1. <style>
  2.   /* 结构伪类参数:nth-of-type(an+b) */
  3.   /* 匹配一个元素 */
  4.   .content > li:nth-of-type(0n + 4) {
  5.     color: red;
  6.   }
  8.   /* 匹配一组元素 */
  9.   /* 匹配第5,6,7,...个元素 */
  10.   .content > li:nth-of-type(n + 5) {
  11.     color: green;
  12.   }
  13.   /* 计算过程:n+5(n=0,1,2,...)->5,6,7,... */
  15.   /* 匹配第1,2,3个元素 */
  16.   .content > li:nth-of-type(-n + 3) {
  17.     color: blue;
  18.   }
  19.   /* 计算过程:-n+3(n=0,1,2...)->3,2,1 */
  21.   /* 匹配奇数元素 */
  22.   .content > li:nth-of-type(odd) {
  23.     background-color: orange;
  24.   }
  25.   /* 计算过程:2n+1(n=0,1,2...)->1,3,5,...*/
  27.   /* 匹配偶数元素 */
  28.   .content > li:nth-of-type(even) {
  29.     background-color: aqua;
  30.   }
  31.   /* 计算过程:2n(n=0,1,2...)->2,4,6,...*/
  32. </style>
  33. <body>
  34.   <ul class="content">
  35.     <li>item1</li>
  36.     <li>item2</li>
  37.     <li>item3</li>
  38.     <li>item4</li>
  39.     <li>item5</li>
  40.     <li>item6</li>
  41.     <li>item7</li>
  42.     <li>item8</li>
  43.     <li>item9</li>
  44.     <li>item10</li>
  45.   </ul>
  46. </body>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
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