css 伪类选择器

伪类选择器

1、a标签四大伪类

• :link：未访问状态

• :hover：悬浮状态

• :active：活跃状态

• :visited：已访问状态

<a href="http:\www.baidu.com" target="_blank">前往百度</a>

a{
        font-size: 20px;
    }
    /*:link 未连接状态*/
    a:link{
        color:black;
    }
    /*：hover 指针悬浮在a标签上时，的效果*/
    a:hover{
        font-style: italic;
    }
    a:active{
        font-size:30px;
    }
    a:visited{
        color:transparent;
    }

3、索引伪类

• :nth-child(n)：位置优先，再匹配类型

• :nth-of-type(n)：类型优先，再匹配位置

v_hint：值可以为位置数，也可以为2n、3n...，代表2的倍数，3的倍数，且位置数从1开始

<div>内容伪类</div>
    <!-- a 标签四大伪类 -->
    <a href="http:\www.baidu.com" target="_blank">前往百度</a>
    <div>内容伪类</div>

/*索引伪类*/
    /*nth-child(n) 先匹配位置，再匹配类型*/
    div:nth-child(1){
        color: red;
    }
    /*nth-of-type(n) 类型优先，在匹配位置*/
    a:nth-of-type(1){
        color:green;
    }

4、取反伪类

• :not(selector)：对selector进行取反

<div class="wrap">
        <div class="s1">s1</div>
        <div class="s2">s2</div>
        <div class="s3">s3</div>
</div>

.wrap>div:not(.s2){
        color: orange;
    }