I recently saw a usage of structural pseudo-class selector on a foreign website. I thought it was very practical, so I tried it myself and recorded it:
This is the most basic style:
<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style type="text/css">
</span><span style="color: #008080;"> 2</span> <span style="color: #800000;"> li</span>{
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> list-style-type</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #979698</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;"> 10px</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;"> text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 60px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50%</span>;
<span style="color: #008080;">13</span> }
<span style="color: #008080;">14</span> <span style="color: #800000;"></style></span>Contents in body:
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第01个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第02个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第03个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第04个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第05个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第06个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第07个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第08个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第09个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">12</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第10个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">13</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>第11个<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">14</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">15</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
First is the usage of the most basic structural pseudo-class selector:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(8)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">4</span> }The results are displayed as:
Use:nth-child(n+6) which is equivalent to:nth-child(6) and above li tag elements:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(n+6)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">4</span> }The results are displayed as:
Similarly, use:nth-child(-n+6) which is equivalent to:nth-child(6) and the following li tag elements:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(-n+6)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">4</span> }The results are displayed as:
Based on the above principles we can come up with some advanced ones:
For example, you can use nth-child(n+4):nth-child(-n+8) to obtain the li tag elements of :nth-child(4) and above and :nth-child(8) and below:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(n+4):nth-child(-n+8)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">3</span> }The results are displayed as:
You can also use:nth-child(n+2):nth-child(odd):nth-child(-n+8) to get:nth-child(n+2) to:nth-child(-n+8 ) between singular li tag elements:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(n+2):nth-child(odd):nth-child(-n+8)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">3</span> }The results are displayed as:
Finally, we can also use:nth-child(3n+1) to get even li tag elements with numbers 1, 4, 7, and 10:
<span style="color: #008080;">1</span> <span style="color: #800000;"> li:nth-child(3n+1):nth-child(even)</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> #298EB2</span>;
<span style="color: #008080;">3</span> }The results are displayed as:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
