CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果。

• 结构：selector : pseudo-class {property: value}

link、visited、hover、active

• 如下，超链接有四种伪类，未访问时link，已访问时visited，鼠标移入超链接上方时hover，鼠标按下未抬起时active

<style>
    a:link {color: red}       /* 未访问的链接 */
    a:visited {color: yellow}  /* 已访问的链接 */
    a:hover {color: blue}  /* 鼠标移动到链接上 */
    a:active {color: brown}    /* 选定的链接 */
</style>

尝试一下》

注意：

• 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

• 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

• 伪类名称对大小写不敏感。

hover我们经常会用到，再看一个经常碰到的效果，按钮移入的时候会改变背景色

button{
    background: white;
    color: red;
}

button:hover{
    background: red;
    color: white;
}

尝试一下》

:first-child第一个子元素

• 如下，div的第一个p元素颜色为红色
  

div p:first-child{
    color: red;
}
 
<div>
    <p>我们都是好孩子</p>
    <p>ABCDEFG</p>
</div>


<div>
    <p>我们都是好孩子</p>
    <p>ABCDEFG</p>
</div>

尝试一下》