使用伪元素选择器添加的内容无法被选中
来源：4-7 编程练习
明月0423
2020-12-24 10:00:36
遇到一个奇怪的问题，在编程练习中编写如下css设置语句：
p::before{content:“《”}
p::after{content:“》”}
p::selection{background-color:yellow}
p::first-line{color:red}
发现有如下表现：
1，使用ie浏览器打开，使用before添加的元素内容可以被选中，背景也会在选中状态下变黄色，但是使用after添加的元素内容无法被选中，这部分内容背景颜色永远不变
2，使用chrome浏览器打开，则无论before和after添加的元素内容都无法被选中，背景颜色均不变化
3，第四行的颜色设置对原内容以及before和after添加的内容设置都有效
请问下这个是什么原因？使用before和after添加的内容不算在p标签内容里吗？如果不算的话，第四行的颜色设置又是可以生效的，如果算的话，选中状态又有问题，请老师指导下，谢谢?
写回答
1回答
-
好帮手慕小轩
2020-12-24
同学，你好！
1. 使用before和after会存在兼容问题， 不同版本的不同浏览器的效果会有不同
2. 谷歌浏览器是选中后是背景颜色是可以改变的，参考图示：
3. before及after伪元素添加的内容不是真正的内容，因此是不能选中的，但是可以对添加的内容设置样式，因此修改字体颜色会生效。
0
相似问题
兄弟选择器的问题
回答 3