一篇搞清伪类和伪元素
站长
· 阅读数 22
本文目的：解决伪类和伪元素傻傻分不清楚的问题！
为了看得清晰，我将下文内容分成3个部分：
- 区分伪类和伪元素
- 将伪类和伪元素分类梳理
- 应用
区分
伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素
那如何区分伪元素和伪类，记住两点：
1. 伪类表示被选择元素的某种状态，例如:hover
2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after
核心区别在于，是否创造了“新的元素”
分类梳理
由于伪类和伪元素存在较多，为了方便记忆，我将其汇总如下两图：
伪元素
伪类
应用
CSS3之前的伪元素
包括before、after、first-letter、first-line ，分别表示元素内容的前面、元素内容的后面以及第一个文字和第一行文字
比如
代码如下
div.box1{
border: 1px rgb(5, 248, 114) solid;
background: rgb(221, 132, 214);
background-clip: content-box;
width: 400px;
padding: 10px;
}
/* 伪元素before和after */
div.box1:before{
content: "我是前面的before";
color: rgb(177, 81, 13);
}
div.box1:after{
content: "我是后面的after";
color: rgb(243, 29, 72);
}
/* 伪元素:first-letter和:first-line*/
div.box2:first-letter{
font-size: 3em;
font-weight: bold;
}
div.box2:first-line{
color: rgb(101, 245, 6);
}
CSS3之后新增的伪元素
包括selection和placeholder，分别表示被选中部分以及占位的文本
比如
代码如下
div.section::selection{
color: rgb(247, 8, 135);
}
input.placeholder::placeholder{
background-color: rgb(80, 156, 231);
color: rgb(19, 235, 235);
}
状态类伪类
分别有link、visited、hover、active和focus，分别表示正常状态下的链接、点击后、悬停时、被激活时和聚焦时
如下
代码如下
a{
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
a.link:link{
background-color: rgb(71, 130, 240);
}
a.visited:visited{
color: rgb(128, 126, 126);
background-color: rgb(203, 218, 151);
}
a.hover:hover{
background-color: rgb(221, 51, 142);
}
a.active:active{
font-size: 2em;
}
a.focus:focus{
background-color: rgb(247, 142, 4);
}
结构类伪类
结构类伪类比较多
下面来用用
代码如下
p:not(.p1) {
font-size: .8em;
}
p:first-child {
font-weight: bold;
}
p:last-child{
color: rgb(86, 168, 5);
}
p:only-child{
color: lightcoral;
background-color: rgb(193, 247, 193);
}
p:nth-child(2n){
background-color: lightseagreen;
}
p:nth-last-child(3){
color: #f44;
}
type系列会更常用一些，因为它突出的是同一类型的元素。由于用法基本一致，这里就不试了
下面看表单相关的伪类
表单相关的伪类
表单相关的伪类也有10多个，如下
下面来试几个
代码如下
input:checked{
width: 25px;
height: 25px;
}
input:disabled{
background: rgb(168, 163, 163);
color: rgb(128, 120, 120);
}
input:enabled{
background: rgb(150, 205, 223);
}
.empty:empty{
height: 1em;
margin: 10px 0;
background-color: rgb(231, 26, 231);
}
其他伪类
包括root、fullscreen、dir和lang等，其实它们用的都不多，不过也来试试，比如通过root伪类表示设置背景为黑色
代码
:root{
background-color: rgb(12, 12, 12);
}
以上是伪类和伪元素的总结，如有问题烦请留言告知，谢谢
END
附件：上述例子的源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>源代码</title>
<style type="text/css">
:root {
background-color: rgb(12, 12, 12);
}
div.box1 {
border: 1px rgb(5, 248, 114) solid;
background: rgb(221, 132, 214);
background-clip: content-box;
width: 400px;
padding: 10px;
}
/* 伪元素before和after */
div.box1:before {
content: "我是前面的before";
color: rgb(177, 81, 13);
}
div.box1:after {
content: "我是后面的after";
color: rgb(243, 29, 72);
}
/* 伪元素:first-letter和:first-line*/
div.box2:first-letter {
font-size: 3em;
font-weight: bold;
}
div.box2:first-line {
color: rgb(101, 245, 6);
}
/* 伪元素selection和placeholder */
div.section::selection {
color: rgb(247, 8, 135);
}
input.placeholder::placeholder {
background-color: rgb(80, 156, 231);
color: rgb(19, 235, 235);
}
/* 状态伪类 */
a {
text-decoration: none;
padding: 10px;
border-radius: 5px;
}
a.link:link {
background-color: rgb(71, 130, 240);
}
a.visited:visited {
color: rgb(128, 126, 126);
background-color: rgb(203, 218, 151);
}
a.hover:hover {
background-color: rgb(221, 51, 142);
}
a.active:active {
font-size: 2em;
}
a.focus:focus {
background-color: rgb(247, 142, 4);
}
/* 结构性伪类 */
p:not(.p1) {
font-size: .8em;
}
p:first-child {
font-weight: bold;
}
p:last-child {
color: rgb(86, 168, 5);
}
p:only-child {
color: lightcoral;
background-color: rgb(193, 247, 193);
}
p:nth-child(2n) {
background-color: lightseagreen;
}
p:nth-last-child(3) {
color: #f44;
}
/* 表单相关 */
input:checked {
width: 25px;
height: 25px;
}
input:disabled {
background: rgb(168, 163, 163);
color: rgb(128, 120, 120);
}
input:enabled {
background: rgb(150, 205, 223);
}
.empty:empty {
height: 1em;
margin: 10px 0;
background-color: rgb(231, 26, 231);
}
</style>
</head>
<body>
<!-- 伪元素 -->
<div class="box1">元素内容</div>
<div class="box2">另外一个div</div>
<br>
<div class="section">
这里有很多内容这里有很多内容这里有很多内容
</div>
<input type="text" placeholder="这里是占位符" class="placeholder"><br><br>
<!-- 状态伪类 -->
<a href="#" class="link">正常链接</a>
<a href="#" class="visited">点击过后</a>
<a href="#" class="hover">悬停时</a>
<a href="#" class="active">被激活状态</a>
<a href="#" class="focus">获得焦点时</a>
<!-- 结构类伪类 -->
<div class="p">
<p class="p1">这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</div>
<div>
<p>独生子</p>
</div>
<br><br>
<!--元素的禁用和启用状态-->
<input type="checkbox" checked />
<input type="checkbox" />
<input type="text" value="禁用了" disabled />
<input type="text" value="启用的" />
<div class="empty"></div>
<br><br><br><br>
</body>
</html>