如何在不崩溃管理 UI 的情况下设置链接样式？答案

【问题标题】：How-to style links without crashing Admin UI?如何在不崩溃管理 UI 的情况下设置链接样式？
【发布时间】：2018-05-24 23:49:13
【问题描述】：

如何在不破坏管理 UI 的情况下设置 <a>-tags 样式？我是否必须在我自己的小部件中为每个<a> 赋予样式类<a class="mystyle">？

如何设置所提供的富文本小部件的链接样式？

我必须使用.apos-rich-text a 来停止更改小部件的管理控制用户界面吗？

因为以下内容会破坏管理 UI。

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

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

如何处理样式并确保您不监督任何事情？！

【问题讨论】：

【解决方案1】：

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

尽管如果管理 UI 能够获得更多的特异性，这样就不会那么容易被 2 个类选择器覆盖它的规则。

【讨论】：

【解决方案2】：

正是由于这个原因，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 正在使用该属性来增强前端的小部件。

【讨论】：