学习CSS之如何改变CSS伪元素的样式
一、CSS伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
伪元素的用法如下:
selector:pseudo-element {property:value;}
CSS 类也可以和伪元素搭配使用
selector.class:pseudo-element {property:value;}
二、修改伪元素样式
1.问题描述
伪元素例子:
.content {
width: 100px;
height: 100px;
margin: 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之如何改变CSS伪元素的样式的更多相关文章
- css:hover状态改变另一个元素样式的使用
效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...
- 知方可补不足~CSS中的几个伪元素
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)
本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...
- CSS(二)- 选择器 - 伪元素和伪类(思维导图)
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
- CSS中容易混淆的伪元素类型和用法
:first-of-type 匹配属于其父元素的第一个特定类型的子元素. 1.例子 <head> <meta charset="UTF-8"> <ti ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习: HTML DOM - 改变CSS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- css hover对其包含的元素进行样式设置
<ul class="icon-down-single-arr-li"> <li> <a href="javascript:void(0)& ...
随机推荐
- dp-最大连续子序列的和
https://www.felix021.com/blog/read.php?1587 什么是最大连续子序列和呢 ? 最大连续子序列和是所有子序列中元素和最大的一个 . 问题 : 给定一个序列 { - ...
- NETCore下IConfiguration和IOptions的用法
NETCore下IConfiguration和IOptions的用法 https://www.cnblogs.com/RainingNight/p/strongly-typed-options-con ...
- AVR单片机教程——蜂鸣器
本文隶属于AVR单片机教程系列. 引子 定时/计数器(简称定时器)是单片机编程中至关重要的一部分,再简单的单片机也会带有定时器. 也许你会觉得我们已经在delay函数中接触过定时器了,然而并不是, ...
- 玩转Django2.0---Django笔记建站基础十二(Django项目上线部署)
第十二章 Django项目上线部署 目前部署Django项目有两种主流方案:Nginx+uWsGI+Django或者Apache+uWSGI+Django.Nginx作为服务器最前端,负责接收浏览器的 ...
- 安全性与收尾工作 创建基本的安全策略 精通ASP-NET-MVC-5-弗瑞曼
- CQBZOJ 避开怪兽
题目描述 给出一个N行M列的地图,地图形成一个有N*M个格子的矩阵.地图中的空地用'.'表示.其中某些格子有怪兽,用'+'表示.某人要从起点格子'V'走到终点格子'J',他可以向上.下.左.右四个方向 ...
- 龙芯 3B1500 Fedora28 安装笔记
版权声明:原创文章,未经博主允许不得转载 龙芯 3A4000 已经发布,十年前的 3B1500 早就落伍了.但我还是打算把它作为寒假刷 ACM 题的主力机 并将此当作年后收到 4000 的预习. 龙芯 ...
- Commvault逻辑架构及组件说明
在学习和使用Commvault软件的过程中,经常会碰到一些术语和缩写,初学者可能并不是很清楚这些术语和缩写的具体含义,接下来我们梳理一下Commvault软件中这些属于和缩写的含义,有可能一次不能梳理 ...
- 19_07_07校内训练[xor]
题意 长度为n的数组,上面有k个位置是1,现在有l种长度的连续全1串,要求用最少的次数将这个数组异或成全0的数组.n<=1E5,k<=10,l<=100. 思考 先将数组进行异或的差 ...
- MinGW安装配置过程
MinGW安装过程 一. 下载 MinGW官网下载地址:http://sourceforge.net/projects/mingw/ 二. 安装 1. 双击下载好的压缩文件. 2. 然后出现如下界面, ...