css-10. 伪元素与伪类_伪元素必须有content-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43552734/article/details/114380519

伪元素

不在文档树，但用户可以看到

CSS2.1提供了两个伪元素

:before 在元素前面插入文本
:after 在元素后面插入文本

注意：伪元素必须添加content样式，伪元素可以像普通文本元素一样设置样式

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1::before {
            content: "before伪元素：";
            color: skyblue;
            font-size: 50px;
            font-family: serif;
            font-style: italic;
            font-weight: bold;
        }
        h1::after {
            content: "after伪元素";
            color: springgreen;
        }
    </style>
</head>
<body>
    <h1>HELLO WORLD</h1>
</body>
</html>

伪类

参考

伪类用于当已有元素处于某种状态时，为其添加对应的样式。比如：用户悬停在指定元素时，可以用:hover来描述这个元素的状态

:link 超链接点击之前
:visited 链接被访问之后
:hover 鼠标悬停在标签的时候
:active 鼠标点击标签，并且不松手时
:focus 标签获得键盘焦点时（比如输入框获得焦点时）
:first-child 选择某个元素的第一个子元素，同理还有:last-child（这两个标签必须声明<!DOCTYPE>
```

li:first-child {
    color: red;
}
```

超链接的四种状态

爱恨法则（love hate）:必须按照下列顺序定义伪类

link
visited
hover
active

并且需要把上述伪类定义在a {}之后，且必须同时定义

伪类和伪元素的特点

伪类和伪元素都不会出现在源文档或文档树中
伪元素和伪类名对大小写不敏感，但是建议小写

伪类和伪元素的区别

伪类时类，伪元素是元素，权值不同

伪类允许出现在选择器的任何位置，而伪元素只能跟在选择器后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background: springgreen;
        }
        input:focus {
            text-align: center;
        }
        <!--鼠标停留在box时，input的文字显示为红色-->
        .box:hover input {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <input type="text" value="hello world">
        hello
    </div>
</body>
</html>