Rumah  >  Artikel  >  hujung hadapan web  >  css3 巧用结构性伪类选择器

css3 巧用结构性伪类选择器

WBOY
WBOYasal
2016-09-28 08:38:261599semak imbas

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来:

这是最基本的样式:

<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>     }

结果展示为:

 

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:CSS理解之padding--非原创Artikel seterusnya:关于css3的背景渐变