html中伪元素怎么更改图片,如何改变css伪元素的样式

本篇文章介绍了如何改变css伪元素样式的方法，希望对学习前端css的朋友有帮助！

一、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("");

但这种方案有个问题，因为对原来的样式进行了覆盖，所以会对所有该类的标签产生影响。

3.方案二

更优的方案是通过增加新的 CSS 类来对伪元素的某些样式进行修改，方法如下：

1)定义新的 CSS 类。

例如增加新的 CSS 类：.change::before {

background: red;

}

2)添加新类以修改伪元素样式。

在 JQuery 中使用 id 选择器和 css 选择器，再使用 addClass() 进行添加修改，示例如下：$("#content1").addClass("change");

html中伪元素怎么更改图片,如何改变css伪元素的样式相关推荐

css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...
HTML中的Postion定位问题及盒子模型、CSS伪类
一.Postion定位问题 1.相对定位(postion:realtive) 图像可以根据原有位置移动,但是原先图像的位置不会改变,哪怕出现空白部分.(占位置) 2.绝对定位(postion:abso ...
jq动态改变路径_在react中使用jQuery动态更改图片路径遇到的问题
您好.如题.我在代码中是这样写的. step:1 为了将默认的小图片列表从上方移到左边,我设置了template Viewer.TEMPLATE = ( ' ' + ' ' ' + ' ' ' + ' ...
【JQ】jQuery改变css伪元素样式
伪元素是什么?例如 :bofore.:after 伪元素不是dom,不能直接操作. 若有以下html和css,通过操作伪元素改变图标颜色: <div class = "table-co ...
js获取更改css伪类
在日常的开发中,我们经常在样式中使用css伪类,必要的时候,通过js操作需要改变css伪类的样式 js获取css伪类通过getcomputed()方法,第一个参数dom元素,第二个参数伪类名称字符串 ...
css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
元素导出为图片与pdf的几种方式
文章目录原生方法将canvas元素导出为图片使用库将html元素导出为图片: 使用库将html元素导出为pdf 原生方法将canvas元素导出为图片使用原生javascript的方法将canva ...
如何修改css伪元素的样式
首先说一下变成思想,众所周知,css伪元素是不可以修改的,首先你查找他的元素就很困难,不知道怎么查找的可以看一下我的另一篇原生js查看css伪元素属性,那么我们应该怎么修改呢 . 其实换一种思维事情就 ...

html中伪元素怎么更改图片,如何改变css伪元素的样式

html中伪元素怎么更改图片,如何改变css伪元素的样式相关推荐

最新文章

热门文章