是否可以删除从另一个css文件继承的css

编程问答 2022-05-26

问题描述

我正在尝试将 QlickView 和 Telerik Kendo 两个第三方工具结合在一起，以创建报告的扩展，但我似乎在一些 CSS 上有冲突。我可以让 Kendo 控件在 QlickView 中正常工作，但 Kendo 按钮未正确对齐。

在 chrome 上查看检查器时，如果我关闭了填充 CSS 元素，则控件工作正常。我无法编辑任一工具的 CSS。是否可以在我自己的 CSS 文件中设置一些内容来纠正冲突的 css？

CSS causing the issue

Miss aligned button

未勾选按钮以删除填充设置。

Padding Removed

Button looks fine

[更新]

按照 CSSBurner 的建议，我再次查看了应用于按钮的 CSS，我可以看到这一点。

enter image description here

我认为这个问题是 unset 现在覆盖了所需的 set。最好只在更具体的 .QvFrame .k-button 上设置填充来模仿 k-button

[更新 2]

这是我目前拥有的，如果我使用 unset，它也会覆盖 .k-button。目前我刚刚应用了如下填充，它看起来是正确的。

enter image description here

.QvFrame .k-button {
padding: 4px 8px;
}

enter image description here

解决方法

您需要：

  1. 在您可以控制的样式表中添加具有更高 specificity 的规则
  2. 用您自己的规则覆盖规则

方法#2 IMO 在这种情况下是更好的选择，因为可能无法使上面列出的选择器更加具体。这应该有效：

/* Your stylesheet */
.QvFrame button {
    padding: unset!important
}

使用 unset 关键字会将填充重置为其初始默认值。有关详细信息，请参阅 https://drafts.csswg.org/css-cascade/#valdef-all-unset。

qlikview