dom动态设置伪类元素css

2024-09-01

动态修改 dom 元素的伪类样式

最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / clss::after 等),因为不是 dom 元素,所以不能直接通过 js 修改其属性,虽然可以通过切换 dom 元素的 css 样式名进行修改,但是这样就比较复杂了. 参考了一个帖子然后进行了一些修改,大概思路如下: 这里使用 windows 8 的工程,js 代码直接写在 defa

CSS伪类与CSS伪元素的区别及由来

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准

用一个例子学习CSS的伪类元素

CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通过DOM去控制它的.而其用法也很简单,和一些伪类一样,如:a:hover, a:active.那么伪元素这里便是 a:before, a:after. 关于伪元素,最重要的一个属性便是 content 属性,如果CSS中的伪元素没有content属性,那么这个伪元素就是没有任何效果的.但是我们可以给

转贴：CSS伪类与CSS伪元素的区别及由来具体说明

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章

css伪类元素：after 的多功能用法——任意大小的底边框

需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板页面比较多,所以想在样式中统一修改,就用到了:after这个伪类元素: 优化前: 优化后: 代码: 优化前: .discount_tab .tab_a.on spanr{ border-bottom:2px solid #39A1FB;} 优化后: .discount_tab .tab_a.on s

关于伪类元素:before和:after

关于伪类元素:before和:after CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪 :link:未被访问状态 :visited:已被访问状态 :hover:鼠标悬停状态 :active:活动状态除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等. :focus:选择器用于选取获得焦点的元素. :first-child:某个标签的第一个元素,例:li :last-child:某个标签的最后一个元素. 而且CS

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史伪元素实际上在CSS1(CSS1发布于 199

button不能添加伪类元素

今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submit">开始择日</button> css样式: .form_btn::before{ content: ""; position: absolute; top:0; background:yellow; width:14px; height: 38px; bac

CSS样式学习-3、轮廓、伪类/元素、display-flex布局

一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决

伪类元素before&after

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ height: 200px; background: yellow; } /* before after伪类必须有content属性才能起作用,值字符串 * 相当于子标签,行内元素 */ .box:after{ content: 'hel

微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题伪类元素

同事找我解决一个问题说安卓圆角没问题苹果上失效了我一看其实就是没做兼容上图给你们看看有没有看出来其实就是父级设置圆角属性失效父元素使用border-radius和overflow:hidden做成圆形,子元素如果使用了transform属性,则父元素的overflow:hidden会失效. 我同事用css3动画给这些字体价格闪闪旋转的金边这个好办父元素使用 -weibkit-mask-image 覆盖掉圆角部分.-webkit-mask-image 可以使用图片.Gradient

如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

HTML部分 <div class="zhihu"> <div class="loginMain"> </div> </div> css部分 .zhihu { height:100%; min-width:720px; text-align: center; vertical-align: middle; } .zhihu:before{ content: ''; display: inline-block; heig

js修改伪类元素样式

css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类

css中伪类和伪元素的区别

转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before.:after称为伪类.CS

细说CSS伪类和伪元素

原文简书原文:https://www.jianshu.com/p/eae56b7fe7fe 大纲 1.伪元素 2.伪类元素 3.伪元素和伪类元素的区别 4.伪类和伪元素的使用 1.伪元素伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的(可以理解为html源码).比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息.并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after

CSS 属性 - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: css3 为了区分两者,明确规定伪类用一个冒号来表示,伪元素则用两个冒号来表示 :Pseudo-classes ::Pseudo-elements ②功能不一样: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果

CSS 之伪类及伪元素

伪类和伪元素用起来非常的方便,在查阅资料及测试后整理下来. 一.伪类 CSS 伪类用于向某些选择器添加特殊的效果.伪类对元素进行分类是基于特征(characteristics)而不是它们的名字.属性或者内容:原则上特征是不可以从文档树上推断得到的. 伪类即 CSS 内植类,CSS 内部本身赋予它一些特性和功能,也就是不用再class=...或id=...就可以用伪类获取元素,当然也可以改变它的部分属性(如: a:link{color:#FF0000;

CSS - 伪类和伪元素的区别

伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式. 属性描述 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦

CSS 伪类与伪元素

CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生选择器等等这些从HTML文档层次结构(DOM树)中获取元素不同的是,伪类和伪元素是预定义的.独立于文档元素的.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).当然,伪类和伪元素的表示形式也使用“:”(英文冒号)

CSS中伪类及伪元素用法详解

CSS中伪类及伪元素用法详解伪类的分类及作用: 注:该表引自W3School教程伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例

dom动态设置伪类元素css

热门专题