频道导航

05-伪类选择器

2019-02-06 CSS 前端之家

前端之家收集整理的这篇文章主要介绍了05-伪类选择器，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte

再给大家介绍一种css3的选择器nth-child()

{:;:; } {:;:; }

    <span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;选中当前指定的元素  数值从1开始</span><span style="color: #008000"&gt;*/</span><span style="color: #800000"&gt;
    div ul li:nth-child(3)</span>{<span style="color: #ff0000"&gt;
        font-size</span>:<span style="color: #0000ff"&gt; 30px</span>;<span style="color: #ff0000"&gt;
        color</span>:<span style="color: #0000ff"&gt; purple</span>;
    }

    <span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;n表示选中所有,这里面必须是n,从0开始的  0的时候表示没有选中</span><span style="color: #008000"&gt;*/</span><span style="color: #800000"&gt;
    div ul li:nth-child(n)</span>{<span style="color: #ff0000"&gt;
        font-size</span>:<span style="color: #0000ff"&gt; 40px</span>;<span style="color: #ff0000"&gt;
        color</span>:<span style="color: #0000ff"&gt; red</span>;
    }

    <span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;偶数</span><span style="color: #008000"&gt;*/</span><span style="color: #800000"&gt;
    div ul li:nth-child(2n)</span>{<span style="color: #ff0000"&gt;
        font-size</span>:<span style="color: #0000ff"&gt; 50px</span>;<span style="color: #ff0000"&gt;
        color</span>:<span style="color: #0000ff"&gt; gold</span>;
    }
    <span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;奇数</span><span style="color: #008000"&gt;*/</span><span style="color: #800000"&gt;
    div ul li:nth-child(2n-1)</span>{<span style="color: #ff0000"&gt;
        font-size</span>:<span style="color: #0000ff"&gt; 50px</span>;<span style="color: #ff0000"&gt;
        color</span>:<span style="color: #0000ff"&gt; yellow</span>;
    }
    <span style="color: #008000"&gt;/*</span><span style="color: #008000"&gt;隔几换色  隔行换色
         隔4换色 就是5n+1,隔3换色就是4n+1
        </span><span style="color: #008000"&gt;*/</span><span style="color: #800000"&gt;

    div ul li:nth-child(5n+1)</span>{<span style="color: #ff0000"&gt;
        font-size</span>:<span style="color: #0000ff"&gt; 50px</span>;<span style="color: #ff0000"&gt;
        color</span>:<span style="color: #0000ff"&gt; red</span>;
    }
        </pre>