最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来：
这是最基本的样式：
<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>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>
首先是最基本的结构性伪类选择器的用法：
<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> }结果展示为：
立即学习“前端免费学习笔记（深入）”；
利用:nth-child(n+6) 相当于:nth-child(6)及以上的li标签元素：
<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> }结果展示为：
立即学习“前端免费学习笔记（深入）”；
同理利用:nth-child(-n+6) 相当于:nth-child(6)及以下的li标签元素：
<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> }结果展示为：
立即学习“前端免费学习笔记（深入）”；
根据以上原理我们可以来一些进阶的：
比如可以利用 nth-child(n+4):nth-child(-n+8) 达到获取:nth-child(4)及以上和:nth-child(8)及以下的li标签元素：
<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> }结果展示为：
立即学习“前端免费学习笔记（深入）”；
还可以利用 :nth-child(n+2):nth-child(odd):nth-child(-n+8) 获取:nth-child(n+2)到:nth-child(-n+8)之间的单数li标签元素：
<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> }结果展示为：
立即学习“前端免费学习笔记（深入）”；
最后我们还可以利用:nth-child(3n+1)获取数目为1、4、7、10中的偶数li标签元素：
<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> }结果展示为：
立即学习“前端免费学习笔记（深入）”；
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
728
收藏
