首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在:before伪类中使用!important重写样式

在:before伪类中使用!important重写样式是不可行的。伪类是用于选择元素的特定状态或位置的CSS选择器,而!important是用于提高样式优先级的标记。然而,伪类的优先级已经很高,无法通过!important来覆盖。

伪类是在元素的内容之前插入的虚拟元素,因此无法直接在:before伪类中应用!important。如果需要重写:before伪类中的样式,可以考虑以下几种方法:

  1. 使用更具体的选择器:通过使用更具体的选择器来覆盖:before伪类中的样式。例如,可以使用元素的类名或ID来选择元素,并在样式规则中使用!important来提高优先级。
  2. 使用其他伪类或伪元素:根据具体需求,可以尝试使用其他伪类或伪元素来实现相同的效果。例如,可以使用:after伪类来插入内容,并在样式规则中使用!important来覆盖样式。
  3. 修改HTML结构:如果可能的话,可以考虑修改HTML结构以实现所需的样式效果。通过修改HTML结构,可以直接在元素上应用样式,而无需使用伪类。

总之,在:before伪类中使用!important重写样式是行不通的。需要根据具体情况采取其他方法来实现样式的重写。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

(2019)面试题:CSS权重计算方式方法

important,是觉得的大佬,排第一。 第一等:代表内联样式: style=””,权值为1000。 第二等:代表ID选择器,:#content,权值为0100。...第三等:代表和属性选择器,.content,权值为0010。 第四等:代表类型选择器和元素选择器,div p,权值为0001。 第五等:通配符、子选择器、相邻选择器等的。...*、>、+,权值为0000。 第六等:继承的样式没有权值。 补充知识: 1、: 类似于::first-child,last-of-type 这称之为。...同时,元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after。】 计算规则 !important 和内联样式style都属于不讲理的那种, 只要存在 !...important,存在style,那么style便具有最高优先级; 剩下的 “ID” 、 “和属性” 、 “元素类型和元素“ 分别对应 权重值(0-a-b-c)的 a/b/c;计算方法 其余某个选择的权重

1K00

重温前端-css篇

例如通过元素您可以设置段落第一个字母的样式,或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 元素的使用相同,都是使一个冒号:与选择器相连。...但在 CSS3 ,将元素单冒号的使用方法改为了使用双冒号::,以此来区分元素。因此,建议在使用元素时使用双冒号而不是单冒号。...第二等:代表ID选择器,:#content,权值为0100。 第三等:代表和属性选择器,.content,权值为0010。...元素(Pseudo-elements) DOM树没有定义的虚拟元素 核⼼就是需要创建通常不存在于⽂档的元素, ⽐::before ::after 它选择的是元素指定内容,表示选择元素内容的之前内容或之后内容...CSS2 之后所有新增的元素(::selection),应该采⽤双冒号的写法。 CSS3元素在语法上也有所区别,元素修改为以::开头。

82430
  • CSS魔法堂:选择器及其优先级

    E:target 选择器( IE浏览器完全不支持:target,另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器)      1....important不是一个优雅的办法,而且会使得样式难以调试,下面是时是使用建议:    1. 永远不要在全局CSS规则中使用;    2. 永远不要在自制的插件中使用;    3....只在需要覆盖全局或外部插件的css规则(Extjs、YUI插件的样式)的特定页面使用;    4. 首先考虑使用优先级来解决问题而不是!important....适合使用的场景:         将行内样式提取出来时,但此时已经有一个全站样式了; 覆盖!important: /* 宽度为200px */ E { width: 200px; !...IE6的bug IE6 :hover 、 :active 和 :visited 选择器的纬度不是0,0,1,0,而是0,0,2,0。

    90860

    彻底弄懂CSS优先级规则

    单个选择器 & 优先级关系链 css常见选择器有7: ID 选择器, #id{} 选择器, .class{} 属性选择器, a[href="csxiaoyao.com"]{} 选择器..., :hover{} 标签选择器, span{} 元素选择器, ::before{} 通配选择器, *{} 此外,再算上内联样式(元素上的style属性)和继承的样式,可以形成优先级关系链...: 内联样式 > ID 选择器 > 选择器 = 属性选择器 = 选择器 > 标签选择器 = 元素选择器 > 通用选择器 > 继承的样式 2.1 demo1 — 优先级关系链应用 根据上述优先级关系链...【 c 】选择器、属性选择器 、选择器 出现的总次数 【 d 】标签选择器 、元素选择器 出现的总次数 首先比较是否使用内联样式,a 的优先级最高,如果 a 相同,按 b、c、d 的顺序依次比较大小...下例是一种常见的场景:由于元素使用了选择器优先级最高的内联样式,无法再通过选择器修改颜色,只能使用 !important,此时文字为蓝色。

    1.5K246

    CSS 样式优先级

    在讨论 CSS 优先级之前,先说说 CSS 7 种基础的选择器: ID 选择器, #id{} 选择器, .class{} 属性选择器, a[href=”http://zhihu.com”]...{} 选择器, :hover{} 元素选择器, ::before{} 标签选择器, span{} 通配选择器, *{} CSS 优先规则3:优先级关系:内联样式 > ID 选择器...> 选择器 = 属性选择器 = 选择器 > 标签选择器 = 元素选择器 CSS 优先规则4:计算选择符 ID 选择器的个数(a),计算选择符选择器、属性选择器以及选择器的个数之和(b)...上面代码,@import 语句必须出现在内部样式之前,否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件,原因见另一篇博客:CSS 引入方式。...CSS 还提供了一种可以完全忽略以上规则的方法,当你一定、必须确保某一个特定的属性要显示时,可以使用这个技术。 CSS 优先规则5:属性后插有 !important 的属性拥有最高优先级。

    47620

    CSS 权重

    important,加在样式属性值后,权重值为 10000 2、内联样式:style=””,权重值为1000 3、ID选择器,:#content,权重值为100 4、和属性选择器,...: content、:hover 权重值为10 5、标签选择器和元素选择器,:div、p、:before 权重值为1 6、通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为...-- 两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000, 所以文字的最终颜色为red --> 上面的例子可以先写一个内联样式,然后再使用div标签选择器...important 参数来看看效果。 内敛样式的div ? 此时可以看到文字已经是蓝色的了。 使用div标签选择器 ? 可以看出,div标签选择器的权重很小,所以无法设置红色覆盖蓝色。...-- 第一条样式的权重计算: 100+1+10+1,结果为112; 第二条样式的权重计算: 100+10+1,结果为111; h2标题的最终颜色为red --> 实践开发情况,这种样式权重比较的情况应该是比较少的

    2.2K20

    twikoo评论块气泡风格魔改美化

    那我首先想到的是用 js 附加 class,然后针对新增的 class 进行样式覆写。 但是在尝试过程,发现不论我如何推迟附加 class 的 js 执行时间,它永远早于 twikoo 评论加载。...原因还在排查…… 才怪咧,我它喵直接跑去提 issue,才不要在这排查 接着就是气泡话评论,用可以轻松实现气泡的小三角,但是因为更改了 overflow 的可见性,如果发横向长图时,若添加了灯箱,存在图片出框可能性...魔改正文 点击查看魔改正文 本方案仍为内测尝鲜版,目前测试无影响正常使用的 bug。请读者酌情使用。 博主气泡效果需要将 twikoo 版本更新至 v1.4.12 及以上。...本方案不具备普适性,不会做成 NPM 插件,对于细节上的,头像宽度,配色方案可以参考注释自行调整。各类配色效果也希望可以分享到评论区。我想做一个展示集锦。...important; } /* 调整楼中楼样式 ,整体左移,贴合气泡化效果 */ .tk-replies { left: -70px; width: calc(100% + 70px); } /

    1.4K20

    深入解析CSS样式优先级

    在编写样式的时候,我们一般都不会使用ID选择器来控制样式,同时也不会在HTML文档添加过多的ID选择器。ID选择器一般更多的是用于获取元素,而不是用来控制CSS样式。 再者是选择器。...w3c样式选择器的权重优先级的排序如下 important > 内嵌样式 > ID > | | 属性选择 > 标签 | 元素 > 对象 > 继承 > 通配符 | 子选择器 | 相邻选择器...选择器,:hover 属性选择器,[type="text"] 元素选择器,::first-letter 子选择器>,相邻兄弟选择器+等等 的优先级(:) 首先来看看选择器的优先级...比如 ::before 和 ::after 这两种元素都是在文档添加一个假的元素,并不能够设置 id class 等属性。所以这里可以把它作为一个唯一的存在。那么他的权重我们可以看为1。...important > ID > class = 属性 = > 标签 > 通配符 > 继承 > 浏览器自带属性 在使用选择器的时候尽可能的选择使用 class选择器或者属性选择器(针对于input

    1.8K10

    前端之 CSS 知识点回顾

    下面列表,选择器类型的优先级是递增的: 派生选择器(例如, h1)和元素(例如, ::before选择器(例如,.example),属性选择器(例如, [type="radio"]),(例如...important规则 当在一个样式声明中使用一个!important规则时,此声明将覆盖任何其他声明。 当两条相互冲突的带有 !...important 是一个坏习惯,应该尽量避免,因为这破坏了样式的固有的级联规则 使得调试找bug变得更加困难了。 一些经验法则 一定要优化考虑使用样式规则的优先级来解决问题而不是!...important 什么是CSS Hack 由于不同厂商的浏览器或某浏览器的不同版本(IE6-IE11,Firefox/Safari/Opera/Chrome等), 对CSS的支持、解析不一样,导致在不同浏览器的环境呈现出不一致的页面展现效果...CSS可以在元素的前后插入文本:在选择器的后面加上::before或者::after。在声明,指定 content 属性,并设置文本内容。

    95540

    深入解析CSS样式优先级

    权重值越高,权重越高,那么样式的优先级就越高。所以,!important的权重是最高的。正式因为这一点,所以!important在编写css样式的时候一般都不建议使用,因为使用了!...w3c样式选择器的权重优先级的排序如下 important > 内嵌样式 > ID > | | 属性选择 > 标签 | 元素 > 对象 > 继承 > 通配符 | 子选择器 | 相邻选择器...选择器,:hover 属性选择器,[type="text"] 元素选择器,::first-letter 子选择器>,相邻兄弟选择器+等等 的优先级(:) 首先来看看选择器的优先级。...比如 ::before 和 ::after 这两种元素都是在文档添加一个假的元素,并不能够设置 id class 等属性。所以这里可以把它作为一个唯一的存在。那么他的权重我们可以看为1。...important > ID > class = 属性 = > 标签 > 通配符 > 继承 > 浏览器自带属性 在使用选择器的时候尽可能的选择使用 class选择器或者属性选择器(针对于input

    1K20

    【CSS3】CSS3 元素选择器 ( 元素选择器语法简介 | 元素选择器权重计算 | 代码示例 )

    权重相同 , 权重为 1 ; 区分 元素选择器 与 选择器 : 选择器 有一个冒号 , : a:hover 表示鼠标经过 a 标签上的样式 ; 元素选择器 有两个冒号 ; 二、CSS3...元素选择器权重 ---- 元素选择器 的权重 与 标签选择器 权重相同 , 权重为 1 ; 属性选择器 , 选择器 的 权重 , 与 选择器 权重相同 , 都是 10 ; 参考 【CSS】CSS...- 权重计算 继承父标签的样式 , * 通配符选择器 0,0,0,0 标签选择器 / 元素选择器 0,0,0,1 选择器 / 选择器 / 属性选择器 0,0,1,0 ID 选择器 0,1,0,0...标签的行内样式 style 属性 1,0,0,0 样式后添加 !...important 权重无穷大 div::before 选择器是由 标签选择器 和 元素选择器 结合而成的 , 标签选择器 的权重为 0,0,0,1 ; 元素选择器 的权重为 0,0,0,1 ;

    1K20

    Web前端学习 第2章 网页重构5 css选择器进阶

    1 .info1,.info2{ 2 color:red; 3 } 选择器 此前我们学习的所有选择器都是静态的定义某些元素的样式,通过选择器,我们还可以为元素添加一定的行为,这里讲解最常用的选择器...::before元素选择器,在每个内容之前插入内容 ::after:元素选择器,在每个内容之后插入内容 示例代码如下所示 1 h1::before{ 2 content:"before"...,css3的语法,为了让选择器和元素选择器有所区分,在元素选择器前又增加了一个冒号,编程了两个冒号。...当时css3是完全兼容此前的css版本的,所以大家在开发的过程,可能会遇到只有一个冒号的元素选择器,虽然可以正常使用,但是这是过时的语法,大家在开发的过程尽量使用css3的新语法,使用两个冒号。...嵌入样式写在html文件,随着网页内容的增加,会显得html文件过于臃肿,所以也不推荐使用这种方式。 从现在开始,我们编写的所有样式,都要使用外部样式

    33900

    【融职培训】Web前端学习 第2章 网页重构5 css选择器进阶

    1 .info1,.info2{ 2 color:red; 3 } 选择器 此前我们学习的所有选择器都是静态的定义某些元素的样式,通过选择器,我们还可以为元素添加一定的行为,这里讲解最常用的选择器...::before元素选择器,在每个内容之前插入内容 ::after:元素选择器,在每个内容之后插入内容 示例代码如下所示 1 h1::before{ 2 content:"before";...,css3的语法,为了让选择器和元素选择器有所区分,在元素选择器前又增加了一个冒号,编程了两个冒号。...当时css3是完全兼容此前的css版本的,所以大家在开发的过程,可能会遇到只有一个冒号的元素选择器,虽然可以正常使用,但是这是过时的语法,大家在开发的过程尽量使用css3的新语法,使用两个冒号。...嵌入样式写在html文件,随着网页内容的增加,会显得html文件过于臃肿,所以也不推荐使用这种方式。 从现在开始,我们编写的所有样式,都要使用外部样式

    25710

    59道CSS面试题(附答案)

    important关键字权重要高于选择器内的 !important关键字权重,即下面所说的选择器权重组合。 内联样式(非元素器)的优先级可看成1.0.0.0。 ID选择器的优先级为0.1.0.0。...注意:在CSS3规范,为了区别元素和,CSS3建议用单冒号“:",元素用双冒号"::"。 7、CSS的哪些样式可以继承?哪些不可以继承?...17、解释一下 CSS Sprite,以及如何在页面或网站中使用它。...解决方法是使用 display:inline。 (2)3像素问题,是使用float引起的。 解决方法是使用 margin- right:-3px。 (3)超链接 hover样式,单击后失效。...CSS的 content属性专门应用在 before/after元素上,用于插入生成的内容最常见的应用是利用清除浮动。

    4.9K50

    你对CSS权重真的足够了解吗?

    important 优先级最高,但也会被权重高的important所覆盖 行内样式总会覆盖外部样式表的任何样式(除了!...important; 行内样式; ID选择器, 权重:100; class,属性选择器和选择器,权重:10; 属性选择器指的是:根据元素的属性及属性值来选择元素,比如button的type属性等。...选择器: :active :focus等选项. 标签选择器和元素选择器,权重:1; 元素选择器: :before :after 等级关系: !...important>行内样式>ID选择器 > 选择器 | 属性选择器 | 选择器 > 元素选择器 权重规则: 1.不推荐使用!important 不推荐使用!important,因为!...color: red; } 6.权重相同时,与元素距离近的选择器生效 比如不同的style表,head头部等,来看下面的栗子: #content h1 { // css样式

    67630

    cssjshtml css 优先级

    选择器类型 下面列表,选择器类型的优先级是递增的: 类型选择器(type selectors)(例如, h1)和 元素(pseudo-elements)(例如, ::before选择器(class...important 规则 当在一个样式声明中使用一个!important 规则时,此声明将覆盖任何其他声明。虽然技术上!important与优先级无关,但它与它直接相关。 使用 !...important 是一个坏习惯,应该尽量避免,因为这破坏了样式的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !...important: A) 一种情况 你的网站上有一个设定了全站样式的CSS文件, 同时你(或是你同事)写了一些很差的内联样式。 在这种情况下,你就可以在你全局的CSS文件写一些!...important样式来覆盖掉那些直接写在元素上的行内样式。 活生生的例子比如:一些写得很糟糕的 jQuery插件里面使用的内联样式

    80830

    深入解析 CSS 选择器

    一、前言 CSS 选择器对 HTML 页面的元素实现一对一,一对多或者多对一的控制,从而给指定元素添加样式。同时还要考虑一个元素被赋予多个样式时如何生效的问题,这个就和选择器优先级相关了。...一个选择器只能使用一个元素 CSS3 元素应该用双冒号,以便区分元素和。但是旧版的规范未做明确区分,所以大多数浏览器中支持部分元素使用单双冒号两种写法。...important; 正无穷 内联选择器 样式作用元素 1 0 0 0 ID 选择器 #id 1 0 0 选择器、属性选择器、选择器 .class 1 0 标签选择器、元素选择器 div 1 通用选择器...注: 权重值相同时,写在后面的样式生效 !important 是 CSS 选择器的一个"流氓"属性,不论选择器的权重或者优先级的高低,只要加上 !...important,那么这个样式的优先级就是最高的 如果针对同一元素样式存在冲突且同时存在 !important,那么选择器总权重值高者生效 选择器的权重值最高就一定会生效吗?

    70750

    CSS选择器及优先级 总结

    一、优先级 不同级别 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。...important > 行内样式 > ID选择器 > 选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性 同一级别 (1) 同一级别后写的会覆盖先写的样式 (2) 同一级别css引入方式不同...“def” 的所有元素 3、 类型 eg 描述 :link a:link 选择所有未被访问的链接 :visited a:visited 选择所有已被访问的链接 :active a:active...三、一些注意 1、id选择器 www3school中所说:“一个id选择器 只能在一个文档中使用一次“, 但在css实践你会发现 两个同样的id都会生效。... 执行结果: 例2:3个 注:如果一个多选择器包含名列表没有的一个名,匹配就会失败。

    57520
    领券