使某个css属性失效 property:unset

旧城等待， 2023-10-02 18:54 10阅读 0赞

在开发过程中，一个元素可能被多次设置了css样式，一般来说，最后一次的css样式会覆盖之前设置的相同css属性，同时会继承之前其他css属性。如果想该元素不继承之前设置的css属性，则可设置继承的属性值为unset。（特别是在引入了多个css文件的情况下）

如下图中的left属性，此时我们将继承的left属性设置为unset，同时设置right属性来改变元素的水平位置。

.swiper-pagination-fraction {
        position: absolute;
        left: 50%;
    }

.swiper-pagination-fraction {
        width: unset;
        position: absolute;
        right: 18.75%;
        left: unset;
        bottom: 7.5%;
    }

此外，unset还有另外一种用法。如果这个属性本来有从父级继承的值（这个属性默认可以继承，且父级有定义），则将该属性重新设置为继承的值。

<div class="bar">
      <p>This text is green (default inherited value).</p>
    </div>

.bar {
      color: green;
    }
    
    p {
      color: red;
    }
    .bar p {
      color: unset;
    }

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_20_color_FFFFFF_t_70_g_se_x_16][]

若想了解更多关于unset的内容，可以前往MDN官网查阅资料。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR2F2aeabpg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c529d39fcc2344bab75578f4a348682b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAR2F2aeabpg==,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关使某个css属性失效 property:unset

在开发过程中，一个元素可能被多次设置了css样式，一般来说，最后一次的css样式会覆盖之前设置的相同css属性，同时会继承之前其他css属性。如果想该元素不继承之前设置的css

旧城等待，/ 2023年10月02日 18:54/ 0 赞/ 11 阅读

相关判断浏览器是否支持某个css属性

判断浏览器是否支持某个css属性 (function(temp){ if(temp.style["transition"]!== undefined){

以你之姓@/ 2023年07月18日 06:53/ 0 赞/ 6 阅读

相关 css 移除某个上级属性的影响

css 移除某个上级属性的影响或者 css中如何清除上级元素对下级元素的影响呢？设置属性值为 initial 很多属性子元素会默认继承父元素的属性,

╰半橙微兮°/ 2023年01月11日 01:23/ 0 赞/ 202 阅读

相关删除css的某个属性_「开发小技巧」01-如何使用JavaScript删除CSS属性？

方法1：使用CSS removeProperty：该CSSStyleDeclaration.removeProperty()方法被用来从一个元件的样式删除一个属性。通过

落日映苍穹つ/ 2023年01月07日 03:42/ 0 赞/ 97 阅读

相关【css】transform使fixed定位失效

> `前言` 转载：[https://www.cnblogs.com/norcoA3/p/6492614.html][https_www.cnblogs.com_norcoA

谁践踏了优雅/ 2022年11月20日 08:03/ 0 赞/ 190 阅读

相关 shiro学习一：使方法注解失效

1、问题描述在项目开发中需要使用 shiro 注解去控制权限，如 @RequiresUser、@RequiresAuthentication 、@Requ

红太狼/ 2022年06月03日 05:56/ 0 赞/ 120 阅读

相关 Shiro使@RequestMapping失效，调用404异常

使用springboot集成shiro的时候总会有很多坑，现在又遇到一个。 shiro集成进来后，调用API直接404异常。部分代码如下： @GetMapp

朴灿烈づ我的快乐病毒、/ 2022年05月18日 06:45/ 0 赞/ 640 阅读

相关 css属性

[关于table相关的属性，CSS样式][table_CSS] <table style="border:1px solid red" align="center"><

﹏ヽ暗。殇╰゛Y/ 2022年05月08日 13:33/ 0 赞/ 320 阅读

相关如何控制a标签使其失效

很简单直接设置href属性的值就ok，当href的属性为\时就失效了或者将a标签中的值为href=“JavaScript：；” 这样也是可以的 //判断手机号

「爱情、让人受尽委屈。」/ 2022年04月23日 07:34/ 0 赞/ 167 阅读

相关在vc6中如何使某个状态栏的按钮使能和失效

1 ![None.gif][] .h 2 ![None.gif][]afx\_msg void OnUpdateButtonStatus(CCmdUI \ pC

太过爱你忘了你带给我的痛/ 2022年04月01日 10:10/ 0 赞/ 184 阅读