伪元素

使用伪元素表示元素中的一些特殊位置
1.首字母
写法： :first-letter ::first-letter

/* 设置p元素内容的第一个字符的样式 */
p::first-letter {
            color: red;
        }

2.首行
写法： :first-line ::first-line

/* 设置p元素内容的第一行的样式 */
p:first-line{
            color: red;
        }

3.指定元素前
写法：:before ::before
::before表示元素最前面的部分，一般需要结合content这个样式一起使用
通过content可以向before或者after的位置添加一些内容

<!DOCTYPE html>
<html>
<head>
    <style>
        p:before {
            content: "内容：";
            background-color: yellow;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<p>123</p>
<p><b>注释：</b>对于在 IE8 中工作的 :before，必须声明 DOCTYPE。</p>
</body>
</html>


4.指定元素后
写法： :after ::after
与:before相反，:after表示元素最后边的部分
5.选中的元素(光标选中的内容) 该伪类在火狐浏览器中采用另一种方式编写(::-moz-selection)——IE6不支持

::selection

/* 为了兼容浏览器，两种方式可以都写 */
p::selection{
    color:orange;
}

p::-moz-selection{
    color:orange;
}

6.其他

:required 必填项
:optional 可选项（与required相对）
:valid 校验无误
:invalid 校验有误
posted @ 2019-12-28 22:11  kanaliya  阅读(107)  评论(0)    收藏  举报