使某个css属性失效 property:unset

旧城等待， 2023-10-02 18:54 52阅读 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 条评论，52人围观）

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

相关阅读

相关 CSS属性

CSS属性 > 属性：属性是指定选择符所具有的属性，它是css的核心，css2共有150多个属性 > 属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜

Love The Way You Lie/ 2023年10月06日 14:59/ 0 赞/ 78 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 css属性

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

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

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

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

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

相关 CSS属性

CSS样式属性 CSS背景属性 Background-color:设置元素的背景颜色属性值： Color\_name:颜色值为颜色名称的背景颜色(比如：

不念不忘少年蓝@/ 2022年02月21日 11:43/ 0 赞/ 485 阅读

相关 CSS属性

CSS属性![在这里插入图片描述][20190815170621659.] （一）对字体设置 ![在这里插入图片描述][watermark_type_ZmFuZ3p

客官°小女子只卖身不卖艺/ 2021年10月13日 15:38/ 0 赞/ 565 阅读