CSS伪类

阅读: 3456    发布时间: 2018-01-11 15:37:48

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>

尝试一下》



-END-