jQuery修改CSS伪元素属性的方法

CSS伪元素（pseudo

elements）不是DOM元素，因此你无法直接选择到它们。

假设有如下HTML代码：

<div

class="techbrood"

id="td_pseudo">techbrood

introduction</div>

和CSS代码：

.techbrood:before

{

width:

0

}

现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%，

有两个方法，一个是添加新的样式：

$('head').append("<style>.techbrood::before{

width:100%

}</style>")

（注意该方法将影响所有的class为techbrood的元素）

另外一个方法是为该元素添加新类，并通过设置新类的属性来达到改变伪元素属性的效果：

.techbrood.change:before{

width:

100%

}

jQuery代码：

$('#td_pseudo').addClass("change")

分别定义不同的id或者class,然后分别设置伪元素即可

举个例子吧

将以下代码存为*.html,本地预览即可见到效果。

<style type="text/css">

/*<![CDATA[*/

.link a,.link a:visited{color:#000}/*class为link的链接属性*/

.red a,.red a:visited{color:red}/*class为red的链接属性*/

.blue a,.blue a:visited{color:blue}/*class为blue的链接属性*/

.green a,.green a:visited{color:green}/*class为green的链接属性*/

/*]]>*/

</style>

<TABLE class="link" border="1">

<TR>

<TD class=red><a href="" title="">这里显示红色</a></TD>

<TD class=blue><a href="" title="">这里显示蓝色</a></TD>

<TD class=green><a href="" title="">这里显示绿色</a></TD>

</TR>

<TR>

<TD ><a href="" title="">这里显示黑色</a></TD>

<TD ><a href="" title="">这里显示黑色</a></TD>

<TD ><a href="" title="">这里显示黑色</a></TD>

</TR>

</TABLE>

对的。

1. “nth-child(n)”匹配属于table元素的第n个子元素，所以“nth-child(2)”选择第二行。

2. “first-child”匹配属于第二个tr元素的第一个子元素，所以这里选择第一列。

3. after为伪元素，在元素内容之后插入内容，必须有content属性。

---