html – 取消设置删除自定义属性 CSS变量

概述请看以下示例： .article, .note { color: var(--text-color, red); } .theme { --text-color: blue; } .theme .note { --text-color: unset; } <section> <p class="article">Article</p> <p cl 请看以下示例：

.article,.note {    color: var(--text-color,red); } .theme {    --text-color: blue; } .theme .note {     --text-color: unset; }

<section>    <p >Article</p>    <p >Note</p></section><section >    <p >Article</p>    <p >Note</p></section>

是否可以通过取消设置CSS变量使第二个“注”再次变为红色？

我知道我可以只将CSS变量应用于.article,但假设我有很多类似的元素,我希望应用主题,但只有少数豁免.然后维护选择器会相当繁琐.

我可以将主题选择器更改为.theme：not(.note),但这不适用于嵌套在其他元素中的任何.note元素.

解决方法 你可以使用值initial,因为IE doesn’t支持 CSS vars这不是一个问题,使用初始这里(也是IE doesn’t support it)

.article,.note {  color: var(--text-color,red);}.theme {  --text-color: blue;}.theme .note {  --text-color: initial;}

<section>  <p >Article</p>  <p >Note</p></section><section >  <p >Article</p>  <p >Note</p></section>

总结

以上是内存溢出为你收集整理的html – 取消设置/删除自定义属性/ CSS变量全部内容，希望文章能够帮你解决html – 取消设置/删除自定义属性/ CSS变量所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。