<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/*
一、伪元素:在HTML文档中并不真实存在的元素。以两个英文的冒号：：开头
1.常用的伪元素
：：before在元素内部最前面插入内容
：：after在元素内部最后插入内容
：：first-letter 在元素内的第一个字母
：：first-line 在元素内部的第一行
：：selection 表示选中的内容
2.注意：
::before与::after中必须有content属性
伪元素在文档中找不到
*/
div::before{
content:"乐";
}
div::after{
content: "笑哈哈";
}
p::first-line{
background-color: #7edcc7;
}
p::selection{
color: red;
background-color: #fde6e0;
font-size: 50px;
}
p::first-letter{
font-size: 30px;
}
</style>
</head>
<body>
<div>呵呵</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt assumenda perspiciatis repudiandae hic natus veniam tempore accusantium, eos neque a, deserunt nemo dolores maxime autem dicta suscipit nobis qui quidem?Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus quam repellat veritatis labore ut hic, dolores necessitatibus inventore aperiam sapiente dicta sed reiciendis expedita nemo, incidunt in provident unde <nisi class="lorem"></nisi></p>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)