1.伪元素选择器——>伪元素：假的(不是自己写的)——>例如:开始before 结束after
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<link rel="stylesheet" href="1.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
<p title="dudu gg">
<!--<before>-->
p1
<!--<after>-->
</p>
</body>
</html>
p::before {
content:"before";
}
p::after {
content:"after";
}
2. 给 p1加一些样式
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<link rel="stylesheet" href="1.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
<p title="dudu gg">
<!--<before>-->
p1
<!--<after>-->
</p>
</body>
</html>
p::before {
content:"before";
}
p::after {
content:"after";
}
p {
background-color: green;
font-size: 70px;
color: red;
}
CSS另一种写法：
p::before {
content:"before";
font-size: 70px;
}
p::after {
content:"after";
font-size: 170px;
}
p {
background-color: green;
font-size: 70px;
color: red;
}
2.真对"块元素"——>第一个字母(英文就是字母，中文就是字)：first-letter——>第一行：fiist-line
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<link rel="stylesheet" href="1.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
<p title="dudu gg">
这是一段p1这是一段p1这是一段p1这是一段p1这是一段p1
</p>
</body>
</html>
p::first-letter {
color: red;
font-size:100px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器</title>
<link rel="stylesheet" href="1.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<!--把 1.css的样式引入到 当前的 3.html里面-->
</head>
<body>
<p title="dudu gg">
这是一段p1这是一段p1这是一段p1这是一段p1
这是一段p1这是一段p1这是一段p1
</p>
</body>
</html>
p::first-line {
color: red;
font-size:100px;
}