CSS 伪元素用于向某些选择器设置特殊效果。
伪元素有哪些：
:first-line 伪元素："first-line"手升 伪元素用于向文本的首行设置特殊样式。
:first-letter 伪元素："first-letter" 伪元素用于向文本的首字母设置特殊样式。
:before 伪元素：":before" 伪元素可以在元素的内容前面插入新内容。
:after 伪元素：":after" 伪元素可以在元素的内容之后插入新内容。
伪元素例子：
.flow_ball1:after {
content: ""
position: absolute
top: 50%
margin-top: -1px
left: 100%
margin-left: 0.133333rem
width: 1.786667rem
height: 2px
background-color: #ff6600
border-radius: 0.053333rem
在名为flow_ball1的class标签后面添加差卜一道橘色横线（类似于流程图那种）
那么，问题来了，怎么用jquery改变伪元素毕庆老的样式呢？
答案在这里：
$('.flow_ball1').append("<style>#fafang::after{display:none}</style>")
不可以。
首先伪元素（pseudo-element）应该是CSS相关的概念。
现有的浏览器纯和辩支持或尚未支持的伪元素如下：
::after
::before
::first-letter
::first-line
::selection
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
在CSS中控制伪元素使用 selector::pseudo-element，比如给div添加 ::after
div::after {
content : 'x'
font-size : 14px
color : red
}
所以你通过JS生成的做缺HTML，在CSS中定义就棚陵好。
::before，::after是伪元素并非doom元素，所以jquery无法选择伪元素。
如果确实需要实现修改伪元素的样式，可以通过下面的例子。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>pseudo-elements test by zhou2003737</title>
<style type="text/css">
p{
color: 运山deepskyblue
}
p:before{
content: attr(data-beforeContent)
color: darkred
}
</style>
</head>
<body>
<p data-beforeContent="测试">1111</p>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
<!--使用jquery1.8之前版本 click方法更改为toggle-->
var times = 0
$('p').on('click',function(){
差没 switch (times){
case 0:
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
case 1:
$(this).attr('data-beforeContent','你这么叼咋不上天呢')
times++
break
case 2:
$(this).attr('data-beforeContent','那就上天吧')
times++
break
default :
times =0
$(this).attr('data-beforeContent','你说啥都是对的')
times++
break
}
})
虚悄纳 })
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）