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>")
//1、获取和设置样式$("#tow").attr("class")//获取ID为tow的class属性
$("#two").attr("class","divClass")//设置Id为two的class属性。
//2、追加样式
$("#two").addClass("divClass2")//为ID为two的对象追加样式divClass2
//3、移除样式
$("#two").removeClass("divClass")//移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")移除多个样式。
//4、切换类名
$("#two").toggleClass("anotherClass") //重复切换anotherClass样式
//5、判断是否含有某项样式
$("#two").hasClass("another")==$("#two").is(".another")
//6、获取css样式中的样式
$("div").css("color")// 设置color属性值. $(element).css(style)
//设置单个样式
$("div").css("color","red")
//7设置多个样式
$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px")
<div class="test">使用jquery修改css中带有important的样式属性</div>外部样式为:
div.test{
width:auto !important
overflow:auto !important
}
通过 $("div.test").css("width","100px")和 $("div.test").css("width","100px !important")是无效的
要想修改div的width,可以通过如下这种方式:
$("div.test").css("cssText", "width:650px !important")要想修改多个属性,可以这么做:
$("div.test").css("cssText", "width:650px !importantoverflow:hidden !important")