Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 常用伪类选择器的实例演示及参数
Blogger Information
Blog 46
fans 0
comment 0
visits 34426
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
常用伪类选择器的实例演示及参数
上草一方
Original
434 people have browsed it

1.结构伪类

关键代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body{
  10.             width: 400px;
  11.         }
  12.         .content>li{
  13.             border: 1px solid;
  14.         }
  15.         /* 选中第三个元素 */
  16.         .content>li:nth-of-type(3){
  17.             background: red;
  18.         }
  19.         /* 选中第一个元素 */
  20.         .content>li:first-of-type{
  21.             background: green;
  22.         }
  23.         /* 选中最后一个元素 */
  24.         .content>li:nth-last-of-type(1){
  25.             background:blue;
  26.         }
  27.         .content>li:nth-last-of-type(4){
  28.             background: orange;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <ul class="content">
  34.         <li>item1</li>
  35.         <li>item2</li>
  36.         <li>item3</li>
  37.         <li>item4</li>
  38.         <li>item5</li>
  39.         <li>item6</li>
  40.         <li>item7</li>
  41.         <li>item8</li>
  42.         <li>item9</li>
  43.     </ul>
  44. </body>
  45. </html>

实现效果如下：

结构伪类参数

部分实现效果图如下：

关键代码如下：

  1.  /* 结构伪类参数：nth-of-type(an+b) */
  2.         /* 匹配一个元素 */
  3.         .content>li:nth-of-type(0n+2){
  4.             background: aqua;
  5.         }
  6.         /* 匹配一组元素 */
  7.         /* 匹配第5，6，7，……个元素 */
  8.         .content>li:nth-of-type(n+5){
  9.             background: olive;
  10.         }
  11.         /* 计算过程：n+5(n=0,1,2,…)->5,6,7,… */
  14.         /* 匹配第1，2，3个元素 */
  15.         .content>li:nth-of-type(-n+3){
  16.             background: orchid;
  17.         }
  18.         /* 计算过程：-n+3(n=0,1,2,…)->3,2,1,… */
  20.         /* 匹配奇数元素 */
  21.         .content>li:nth-of-type(odd){
  22.             background: red;
  23.         }
  24.         /* 计算过程：(2n+1)->1,3,5,… */
  26.         /* 匹配偶数元素 */
  27.         .content>li:nth-of-type(even){
  28.             background: aqua;
  29.         }
  30.         /* 计算过程：2n(n=0,1,2,…)->2,4,6,… */
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