伪类选择器笔记_伪类选择器的冒号前面能使用空格吗-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_22480443/article/details/110476732

选择器

12.伪类选择器
13.伪元素选择器
14.结构伪类选择器

12.伪类选择器

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

选择器	含义
E:link	选中所有未被点击的链接
E:visited	选中所有已被点击的链接
E:hover	选中鼠标悬停其上的E元素
E :active	选中鼠标已经其上按下、还没有释放的E元素
E:focus	选中拥有键盘输入焦点的E元素（无法在 IE 中工作）
E:lang(c)	选中lang属性等于c的E元素

提示：在 CSS 定义中，E:hover 必须被置于 E:link 和 E:visited 之后，才是有效的。
提示：在 CSS 定义中，E:active 必须被置于E:hover 之后，才是有效的。

实例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>伪类选择器</title>
    <style type="text/css">
        a:link {color: red}    /* 未访问的链接 */
        a:visited {color: green}   /* 已经访问的链接 */
        a:hover {color: pink}   /* 鼠标移动到链接上 */
        a:active {color: blue}    /* 选中的链接 */
    </style>
    </head>
    <body>
        <p><b><a href="http://www.baidu.com" target="_blank">这是一个链接。</a></b></p>
        <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
        <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
    </body>
</html>

难以理解透，可以参考W3Scholl伪类，这里就不做详细说明了。

13.伪元素选择器

CSS 伪元素用于向某些选择器设置特殊效果。

选择器	含义
E:first-letter	选择到了E元素内的第一个字母
E:first-line	选择到了E元素内的第一行文本
E:before	在E元素内部的前面插入一个元素
E:after	在E元素内部的后面插入一个元素

HTML5写法和传统写法区别

单冒号 E:after

双冒号 E::after

浏览器对以上写法都能识别，双冒号是html5的语法规范。
注意事项：

伪元素只能给双标签添加，不能给单标签添加
伪元素的冒号前不能有空格
伪元素里面必须写上属性content:"";
before和after创建一个元素，但是属于行内元素

实例部分代码：

       /* 选中.ps元素的第一行 */
        p:first-line {color: lightgray;} 
        /* 选中.ps元素的第一个字母 */
        p:first-letter {color: lightgreen;}
        /* 在.ps元素之后添加内容 */
        p:after {
            content:"你认为这个世界如何？";
            color: red;
            font-size: 28px;
        }
        /* 在.ps元素之前添加内容 */
        p:before {
            content:"你认为这个世界如何？";
            color: blue;
        }

14.结构伪类选择器

选择器	含义
E:first-child	选中父元素的第一个子元素E
E:last-child	选中父元素中最后一个E元素
E:nth-child(n)	选中父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E