Question

在以下示例中，我有一个Bootstrap按钮样式，该样式被Kendo-UI的color: inherit设置的.k-grid条目所劫持：

.k-grid a {
  color: inherit;
}

<div class="k-grid">
  <a class="btn btn-secondary" href="#">Button</a>
</div>

此处演示：http://jsfiddle.net/aq9Laaew/299912/

您会发现inherit的{{1}}属性会绕过传递给.k-grid a标记的任何其他类。最终，在Kendo网格表中，Bootstrap按钮显示为错误的颜色。

解决此问题的正确方法是什么？我不确定在Bootstrap的SASS中添加a是最佳解决方案。

Answer 1

查看您的小提琴之后，我可以在检查器中看到Bootstrap的重置应用了以下内容：a:not([href]):not([tabindex]) {color: inherit;}

此外，小提琴中的锚点没有href，因此适用上述CSS。

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="k-grid">
  <a href="#" class="btn btn-secondary">Button</a>

  <a class="btn btn-secondary">Button</a>
</div>

因此，尝试使用以下方式设置按钮的样式（无href）：由于CSS specificity，.btn-secondary {color: white;}无法正常工作。

如果您仍然对CSS specificity感到困惑，请找一个this one之类的特异性计算器，然后将两个选择器都粘贴到其中。

您会发现.btn-secondary 不够具体来覆盖来自Bootstrap重置的规则，该重置为您的按钮应用样式。

鉴于kendo-ui也通过以下方式影响您的按钮样式：.k-grid a {color: inherit;}，解决您问题的最佳方法是使用（您猜对了）具有更高特异性的选择器来定位按钮。

.k-grid a {
  color: inherit;
}

.btn.btn-secondary {
  color: white;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="k-grid">
  <a href="#" class="btn btn-secondary">Button</a>

  <a class="btn btn-secondary">Button</a>
</div>

Answer 2

我建议您了解CSS的特异性例如：http://cssspecificity.com

在您的情况下，.one类比.on-class和元素要具体

Answer 3

Inherit CSS关键字使指定元素的元素从其父元素中获取属性的计算值。可以将其应用于任何CSS属性，包括全部的CSS缩写。

对于继承的属性，这加强了默认行为，仅在覆盖另一个规则时才需要。

这将帮助您： https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

如果您想进一步挖掘： https://developer.mozilla.org/en-US/docs/Web/CSS/inherit， https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value

为什么CSS继承属性会覆盖我的样式？

3 个答案: