伪元素
伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
伪元素作用
伪元素用来表示 原正常元素中的 特殊位置
比如first-letter就是一个伪元素 用来表示p段落(p中段落就是一个元素)中第一个字 通常借此来对一些元素中特殊位置的字符进行修改
first-letter
first-letter 选定段落中第一个字
first-line
first-line 选定一整行
before
选定段落最前 即就跟打字的时候把光标移动到段落最开头一样 可借此在段落最前面输入东西
after
选定段落后面 即就跟打字的时候把光标移动到段落最后面一样 可借此在段落最前面输入东西
content
一个奇怪的玩意 不知道是不是伪元素
用于在段落加入不可选定的内容 一般配合before和after使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style type="text/css">
p:first-letter{
color: orange;
font-size: 100px;
}/*first-letter 只修改p段落中第一个字*/
p:first-line{
color: red;
}/*first-line 修改一整行*/
p:before{
content:"劳资給呢一道";
font-size: 100px;
}/*before和content配合使用
可在元素最前面加上不可选内容内容*/
p:after{
content:"不要,我不要刀";
color: gold;
}
</style>
<!--
伪元素用来表示 原正常元素中的 特殊位置
比如first-letter就是一个伪元素 用来表示p段落(p中段落就是一个元素)中第一个字
-->
</head>
<body>
<p> 劳资給腻易圈<br/>打你嗷</p>
</body>
</html>