css - mkdocs 和 markdown : base. css 覆盖自定义 css

Question

我是 mkdocs 的新手，这是我正在尝试做的事情: 为图像添加标题并使用 css 样式来使用较短的边距底部 我设法安装了一个 python-makdown 扩展“字幕”，所以如果我使用

![](../img/some.png)
:   my sub caption

我会得到

<figure><img ...><figcaption>...

在 html 中。不幸的是，间距 (css: margin) 太大了，所以我包含了一个 css 文件来删除默认值。现在浏览器中的检查显示 base.css 覆盖了我的样式，因此边距保持默认。 如何用我自己的样式覆盖 base.css 样式？

正如我在评论中所写，!important 保证覆盖:

figure img {margin-bottom: 0px !important;}

但我不明白为什么...

Answer 1

如果您使用浏览器的开发者工具检查 img 元素...

您可以看到 img 定义了 div.col-md-9 img 的规则。也就是说，div 下具有 col-md-9 类的任何 img 标签。

我们可以看到(如 CSS Precedence 中所述)原始规则使用一个类属性和两个元素名称来实现 0012 的特异性。您需要具有同等或更高特异性的东西。但是 figure img 只给你 0002，这是更低的。

要覆盖它，您至少需要相同级别的特异性:

我相信其他各种排列也会产生有效的结果。但我们有一个可行的解决方案，所以为什么要继续前进。多亏了“检查”工具，解决起来非常快捷。