一、伪类 和 伪元素概述
伪类不产生新的对象，只是在DOM中一个元素的不同状态。
伪元素是产生了新的“元素”，是在页面执行过程中，动态的从css代码里面加载这个“元素”，在HTML DOM树中看不到这个元素，所以叫伪元素。
CSS3以后，语法上，伪类是单冒号 :，伪元素是两个冒号::,但是为了和前面的css兼容，伪元素也可以写单冒号。
exp1： 伪类
语法：
标签名:状态 {
属性：值;
属性：值
}
<head>
<meta charset="UTF-8">
<title>伪类和伪元素</title>
<style type="text/css">
a:hover{ /*还是a元素，但是状态变成悬浮，这就是伪类。a:hover就是伪类选择器*/
color: brown;
}
a:active{
background: green; /*还是a元素，但是状态变成点击元素后*/
}
</style>
</head>
<a href="https://www.bilibili.com/" target="_blank">来b站</a> <!--鼠标停在“来b站”时，触发css代码-->
总结：伪类选择器本身是一种状态，鼠标悬浮在元素上，或者点击元素后触发该状态。
exp2：伪元素
语法：
标签名::伪元素 /*css3以后，伪元素是两个冒号，为了和css1、2兼容，单冒号也可以*/
{
属性：值;
属性：值
}
<style>
p::first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式：</p> <!--“你”被红色变大 -->
总结：p标签的一整段话中，只处理了"你”,其他都没被处理，就像专门给“你”做了一个元素，类似<span>你<span>，但是专门给“你”做的元素，在DOM树中又看不到，所以叫“伪元素”
扫一扫
1116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
