伪类选择器

伪类用于定义元素的特殊状态。
    例如，它可以用于：
        设置鼠标悬停在元素上时的样式
        为已访问和未访问链接设置不同的样式
        设置元素获得焦点时的样式

1、锚伪类：链接能够以不同的方式显示：

/*去除下划线*/
a {
    text-decoration: none;
}

/*未访问的链接*/
<style>
a:link {
    color: yellowgreen;
}

/*已经访问的链接*/
a:visited {
    color: red;
}

/*鼠标移动上去时起效：必须要link和visited定义了以后才能生效。*/
a:hover {
    color: brown;
}

/*选中的链接：点击时显示的颜色，必须位于hover后才能生效*/
a:active {
    color: yellow;
}

</style>
效果：

 

 a:hover要生效前面必须先设置好a:link和 a:visted。

其他元素也有hover动作，而不需要前置条件。

 

代码：

/*其他元素也有hover动作，而不需要前置条件*/
div {
    background-color: red;
    color: green;
    text-align: center;
    font-family: 楷体;
    padding-top: 50px;
    padding-bottom: 50px;
}

/*鼠标移动到元素上时，变色*/

div:hover {
    background-color: hotpink;
}

效果：

 

 

 2、第二部分

:first-child伪类，与指定的元素匹配：选中的元素是该元素的第一个子元素。

div {
    background-color: red;
}
/*选中div元素中的第一个P标签*/
div P:first-child {
    background-color:#3399ff;

}


效果：

 

 

:nth-child（）伪类，与括号中指定的子元素匹配

        div {
            background-color: red;
        }
        /*选中div元素中的第一个P标签*/
        div P:first-child {
            background-color: #3399ff;
        }
        /*选中div元素中的第二个P标签*/
/*        div P:nth-child(2) {
            
        }*/

        /*:nth-child（）伪类，与括号中指定的子元素匹配*/
        .hiddenp>i:nth-child(2) {
            color: red;
        }

html代码：

<div>第一个div元素
    <p class="hiddenp" >第四个段落
        <i>文字</i>
        <i>文字</i>
    </p>
    <p class="hiddenp">第五个段落
        <i>文字</i>
        <i>文字</i>
    </p>
    <p class="hiddenp">第五个段落
        <i>文字</i>
        <i>文字</i>
    </p>
</div>
p标签的class是hidden，hidden的子元素是i，：nth-child（2）选中第二个i元素的文字为红色。
效果：