学习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)& ...
随机推荐
- kubernetes基础概念知多少
kubernetes(简称k8s)是一种用于在一组主机上运行和协同容器化应用程序的管理平台,皆在提供高可用.高扩展性和可预测性的方式来管理容器应用的生命周期.通过k8s,用户可以定义程序运行方式.部署 ...
- [bzoj4447] [loj#2010] [Scoi2015] 小凸解密码
Description 小凸得到了一个密码盘,密码盘被等分成 \(N\) 个扇形,每个扇形上有一个数字(0-9),和一个符号("+"或"*") 密码盘解密的方法 ...
- 夜晚 十点 React-Native 源码 暴力畜 系列
百度 上 给的 关于 React-Native 的 排名 前三 继续 跟
- 「雅礼集训 2017 Day2」棋盘游戏
祝各位圣诞后快乐(逃) 题目传送门 分析: 首先棋盘上的路径构成的图是一张二分图 那么对于一个二分图,先求出最大匹配,先手如果走到关键匹配点,只要后手顺着匹配边走,由于不再会出现增广路径,所以走到最后 ...
- GitHub学习之路1
对于代码的管理以及维护上,GitHub不失为一个较为明智的选择.而对于GitHub的灵活应用也是相当重要的,以下记录为以防自己忘记. 1. 创建SSH Key ssh-keygen -t rsa –C ...
- Mayor's posters (线段树+离散化)
Mayor's posters Description The citizens of Bytetown, AB, could not stand that the candidates in the ...
- Catch That Cow (简单BFS+剪枝)
Problem Description Farmer John has been informed of the location of a fugitive cow and wants to cat ...
- 团队项目-Beta冲刺(第一周)
团队项目-Beta冲刺(第一周) 一. 作业描述 这个作业属于哪个课程 这个作业要求在哪里 团队名称 CTRL-IKun 这个作业的目标 合理安排时间完成接下来的任务,剩余任务预估,分配任务(开发,测 ...
- re模块的使用
re模块下的函数 compile(pattern):创建模式对象 import re pat = re.compile('D') m = pat.search('CBA') #等价于re.search ...
- Spring事务梳理
Spring事务传播行为 概述 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为 事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数 ...