如何设置样式链接而不会崩溃Admin UI？

Question

我遇到与how-to-separate-apostrophe-syles-from-the-front-end-template相关的问题。

如何在不破坏管理界面的情况下设置<a> - 标签的样式？ 我是否必须在自己的小部件中为每个<a>提供样式级<a class="mystyle">？

为所提供的richtext-widget的链接设置样式的方式是什么？

我是否必须使用.apos-rich-text a来停止更改小部件的admin-control ui？

因为以下内容会破坏管理员界面。

.custom-main-container a:hover {
    color: #ffffff !important;
}

菜单文本在悬停时变为白色，无法读取。

处理样式的方法是什么，并确保不监督任何事情？

Answer 1

由于CKEditor不允许您轻松地在链接上应用类，因此Apostrophe开发团队通常会在元素级别远离样式，但是CKEditor不允许您轻松地在链接上应用类。

将样式范围扩展到a元素并且不干扰Apostrophe管理UI的简单方法是将项目级别类添加到富文本窗口小部件包装器中。

在您的项目级别/lib/modules/apostrophe-rich-text-widgets/views/widget.html

<div data-rich-text class="apos-rich-text MY-RICH-TEXT">{{ data.widget.content | safe }}</div>

然后在你的CSS中你可以写

.MY-RICH-TEXT a:hover { //whatever }

确保将data-rich-text留在包装器中，Apostrophe正在使用该属性来增强前端的小部件。

Answer 2

我的耻辱......问题是上面的!important 这使得特异性太高。不知何故，我之前没有理解这一点。

虽然如果管理员用户界面更具特异性，那么用2个类选择器覆盖它的规则就不那么容易了。