Rumah >hujung hadapan web >html tutorial >css3 巧用结构性伪类选择器
最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来:
这是最基本的样式:
<span style="color: #008080;"> 1</span> <span style="color: #800000;"><style type="text/css"> </style></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;"></span>
body内的内容:
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><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 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 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 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 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 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 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 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 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 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 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></span></span></span></span></span></span></span></span></span></span></span></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> }
结果展示为: