怎样转变css伪元素的样式
发布时间:09/01 来源:未知 浏览:
关键词:
一、CSS伪元素
CSS 伪元素用于向某些选中器设定非凡结果。
伪元素的用途如下:
selector:pseudo-element {property:value;}
CSS 类也可以和伪元素搭配使用
selector.class:pseudo-element {property:value;}
二、修改伪元素样式
( 引荐学习:CSS教程 )
1.问题描写
伪元素例子:
.content { width: 100px; height: 100px; margin: 0 auto; background: black; } .content::before { content: ""; width: 20px; height: 20px; position: absolute; background: blue; }
假如我们想对修改伪元素的样式,又该如何做呢?由于伪元素在DOM树中创立了一些抽象元素,但这些抽象元素是不存在于文档说话里的,即不存在于 HTML 源码里,所以并不克不及通过选中器来选中这些伪元素。既然不克不及选中伪元素,那要如何才能修改伪元素的样式?
2.方案一
通过增添 style 标签以从新定义伪元素,实现对伪元素样式的覆盖,办法为:
$(".content").append("<style>.content::before{display:none}</style>");
但这种方案有个问题,由于对本来的样式停止了覆盖,所以会对所有该类的标签发生影响。
3.方案二
更优的方案是通过增添新的 CSS 类来对伪元素的某些样式停止修改,办法如下:
1)定义新的 CSS 类。
例如增添新的 CSS 类:
.change::before { background: red; }
2)增加新类以修改伪元素样式。
在 JQuery 中使用 id 选中器和 css 选中器,再使用 addClass() 停止增加修改,示例如下:
$("#content1").addClass("change");
以上就是怎样改动css伪元素的样式的具体内容,更多请关注百分百源码网其它相关文章!