覆盖古腾堡中的主题样式规则

时间：2019-02-20 作者：leemon

我有一个主题，通过自定义程序内联添加以下CSS规则，以设置帖子内容中链接的悬停状态：

.entry-content a:hover {
    color: <color selected in the Customizer>;
}
我在我的主题中添加了对古腾堡的支持，我对链接按钮块有一些问题。前面的规则将覆盖以下默认核心块样式规则，该规则将应用在Gutenberg中为按钮活动、焦点和悬停状态选择的相同链接按钮颜色：

.wp-block-button__link:active,
.wp-block-button__link:focus,
.wp-block-button__link:hover {
    color: inherit;
}
检查检查员，我发现应用的最后一条规则是第一条规则，而不是第二条规则，我认为第二条规则更具体。这意味着在古腾堡选择的链接按钮颜色不受尊重。

有没有办法解决这个问题？

提前感谢

1 个回复
最合适的回答,由SO网友:Jacob Peattie 整理而成

.entry-content a:hover 比.wp-block-button__link:hover.

根据rules of specificity, 第一个选择器包含2个类选择器(.entry-content 和:hover), 和1个类型选择器(a), 对于specificity score 属于0,0,2,1.

另一方面，第二个选择器包含2个类选择器(.wp-block-button__link 和:hover), 没有类型选择器，分数为0,0,2,0.

从您的问题中，我不清楚第二组选择器的确切来源，但假设您无法编辑它们，解决方案将是从原始选择器中排除古腾堡按钮。您可以使用:not pseudo class:

.entry-content a:not(.wp-block-button__link):hover {
    color: <color selected in the Customizer>;
}
现在，自定义程序选择的颜色将仅应用于不是块编辑器/古腾堡按钮的链接。

标签： theme-customizer   block-editor   css   小码农  

相关推荐

仅在单个帖子页面中隐藏CSS类

我需要在我的帖子页面中隐藏一些元素，但不是在所有其他正常页面中。现在它们出现在我所有的Wordpress网站上（单篇文章、页面等）。如何通过CSS隐藏元素？此元素只有一个类<div class=\"frame-content\". 我可以这样做吗：if <post> then .frame-content{display:none;}?