写在分割线之前：为什么作为一个seo要学习这个，合肥SEO竞争压力这么大吗？其实仅仅对于搜索优化本身，css和js之类的了解使用方法就完全足够，之所以不断充电，是希望自身能够武装起更多的武器！面对困难，迎男而上，对不起是迎难而上！只要足够强大，问题就难不倒我！
伪元素和伪类从字面理解就是假的元素和假的类。
伪元素选择器作用：
为某个元素的前面或者后面添加子元素。
格式：
标签::before{属性: 值;}。在标签之前添加子元素
标签::after{属性: 值;}。在标签之后添加子元素
content:在伪元素选择器中代表内容；
visibility: hidden:将伪元素选择器隐藏
p.test1{
...
}
a:hover{
...
}
p::before{
...
}
p{
...
}
<p class="test1">test1</p>
<p class=""test2>test2</p>
<a href=http://www.seoerl.com/website/"...">tag a</a>
CSS3伪元素选择器的使用
一、 ::first-letter 第一个字
二、 ::first-line 第一行（以浏览器为准的第一行）
三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
四、::before 和 ::after
1. 必须带一个属性content
2.在内部内容的前面或者后面插入内容
<div>必须带一个属性content</div>
div::before {
content: "我是插入的内容";
background: #572eb8;
}
3.当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）。
<body>
<div>盒子1</div>
</body>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
}
div::before{
content: "插入的盒子";
display: block;
width: 200px;
height: 200px;
background: rgb(211, 29, 29);
}
4.上述可以解释清除浮动的后面两种方法，单伪元素法和双伪元素法
最后，我们用通俗的方法理解伪类选择器和伪元素选择器是什么!
元素选择器：如上面的p{}，实实在在的存在的元素。
伪元素选择器：dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）
类选择器：真实有的类，我们自己正儿八经定义的类，如p.test1，选择p标签（元素选择器）具有类test1的所有元素，这个类是具体的，形象的，看得见的
伪类选择器：一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如first-child，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类.
注：CSS元素的优先级
不同级别：!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器
同一级别
（1）同一级别中后写的会覆盖先写的样式
（2）同一级别css引入方式不同，优先级不同
排序：内联（行内）样式 > 内部样式表 > 外部样式表 > 导入样式（@import）
到此这篇css3伪元素选择器（伪元素选择器selection）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/77712.html