覆盖CSS属性全部:未设置

2024-02-19

对于我正在开发的 CSS 框架,我正在使用all: unset,它本身工作得很好:

#foo { all: unset; }

但是,在某些情况下,我想“撤消”此规则的效果,如

#foo:hover { all: auto; }

然而,这显然行不通,因为没有值auto for all。相反,我们有价值观inherit and initial,而不是“取消”all属性,具有不同的效果:将所有值恢复为其父级的值或其初始值(我认为这意味着系统级默认值)。

为了实现我想要的,我现在正在做的事情

#foo:not(:hover) { all: unset; }

例如,如果我想对多个伪类执行此操作,并且我更愿意覆盖all: unset财产?有什么办法可以做到吗?


似乎无法消除其影响all属性一旦被指定。这可能是由于all是一个简写属性(恰好只接受 CSS 范围的关键字作为值)。

您不能像 css-cascade-4 引​​入的那样从级联中删除简写声明revert关键字允许您删除作者级别的声明,这是因为速记属性在级联中不作为其自己的实体存在;相反,它仅代表其所有组件属性。就像更传统的简写属性一样,例如background and font,覆盖已应用的简写声明的唯一方法是通过普通声明或另一个简写声明重新指定被覆盖的普通写法的值。但你不能用后者来做all属性,因为它只接受 CSS 范围的关键字。

由于前者显然不切合实际all简而言之,由于您无法预测哪些作者级别的声明会被覆盖,所以您唯一的其他选择是通过选择器限制它,从而从一开始就防止它在特定情况下应用。希望我们能看到更多级别 4 的实现:not()在不久的将来,这将使编写选择器变得更加容易。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

覆盖CSS属性全部:未设置 的相关文章

  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 使用deployJava.runApplet来定位特定元素

    经过多年成功维护一个使用旧有的小程序 嵌入Java小程序的方法 我们无法捂住耳朵唱 啦啦啦 不再了 是时候使用 deployJava runApplet 当我使用点击处理程序触发此方法时 此处通过 jQuery 在按钮上使用事件侦听器 但这
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 滚动时我的身体背景颜色消失

    我希望有人能帮帮忙 我已将 body height 属性设置为 100 当所有内容同时显示在屏幕上时 这很好 然而 当我需要滚动 最小化窗口时 主体颜色消失 只留下我为 HTML 背景设置的颜色 有人知道解决办法吗 html backgro
  • 双弧形

    我目前正在尝试生成 波浪形幽灵底部 形状 该形状包含两条双曲线 虽然底部的部分这个图片 http images clipartpanda com ghost clip art castle ghost clipart1 jpg我认为以更好的
  • 如何淡化循环背景图像?

    这里的菜鸟 我试图让我的静态背景变成一个轮播 我当前的html看起来像这样 div class pageContent div 和我的CSS body background url http placehold it 1600x1200 n
  • iOS 11 浏览器图像错误

    在 iOS 11 中滚动页面时出现以下错误 在 Firefox Safari 和 Chrome 中 在 Android 设备中 不会发生该错误 这些是背景图像 我不知道这是否是导致错误的原因 图 2 显示了图像在 Android 中的用途和
  • 有没有模拟 Facebook 游览的 jQuery 插件?

    我指的是 Facebook 游览 可能使用开箱即用的 Facebook CSS 我已经知道这两个 http tympanus net codrops 2010 12 21 website tour http tympanus net cod
  • 如何使 WordPress 主题全宽?

    我尽了最大努力 但无法通过编辑 CSS 使以下主题全宽 屏幕 如果您能向我展示或给我有关此定制的提示 我将不胜感激 http demo mythemeshop com sociallyviral http demo mythemeshop
  • iframe 重新加载按钮

    我浏览了很多网站 但似乎没有一个能正常工作 或者我不明白它们 我想要一个刷新某个 iframe 的简单按钮 该按钮将位于父页面上 并且 iframe 名称为 Right 有很多方法可以做到这一点 假设这个iframe markup 我们可以
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • 如何使 jQuery 向上动画

    我有一些 jquery 运行得相当好 但是当我将鼠标悬停在有问题的元素上时 底部向下扩展 这并不意外 但不是所需的效果 我希望元素的底部保持静止 而元素的顶部向上扩展 如果您想查看我目前拥有的内容 您可以导航至http demo ivann

随机推荐