jQuery如何改变css伪元素样式

首先我们看一下css伪元素是什么：

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>")

不知道我说得对不对，

jquery

提供的伪类选择器都是针对html元素的，而

css

中

:after

和

:before

这些是伪元素，jquery

中并不能获取这些伪元素。

而且

animate()

和

css()

都是在标签中增加/改变

inline-style，而伪元素自身并不带有

inline-style。

当然可以通过更变

.snow

的

className

来改变

:after

和

:before

的样式。而对于伪元素的动画效果，可以考虑用

gif

背景图，或者

css3

的动画效果来替代。

-webkit-autofill 这种东西要查找浏览器的兼容。选择器的话看下jquery源码就知道了是否支持一种样式。var input= document.createElement('input'), vendors = 'Khtml Ms O Moz Webkit'.split(' '), len = vendors.lengthreturn function(prop) { if (prop in input.style) return trueprop = prop.replace(/^[a-z]/, function(val) { return val.toUpperCase()})for (var i = 0i <leni++) { if (vendors[i] + prop in input.style) { // browser supports eg:box-shadow. Do what you need. // Or use a bang (!) to test if the browser doesn't. return true} } return false}

---