时间戳

首页 > 解决方案 > CSS/Wordpress：无法将下划线应用于 id 包含给定字符串的链接

css - CSS/Wordpress：无法将下划线应用于 id 包含给定字符串的链接

问题描述

我有多个登录页面，其中包含要应用下划线的相同元素。我正在使用 Wordpress 自定义 JS/CSS 插件为每个页面添加 CSS，但我想通过仅匹配 ID 名称的一部分而不是单独为每个页面进行匹配来简化操作。

这是每个 LP 的代码：

#hi-call-button1-2{
    text-decoration: underline;
}

这是我试图使工作无济于事的代码：

div[id*="hi-call-button1"] {
    text-decoration: underline;
}

以下是元素的代码：

<div id="hi-call-button1-3" class="brz-css-uiyth brz-wrapper">
    <div class="brz-d-xs-flex brz-css-qllru">
        <div class="brz-rich-text brz-css-tuigc" data-custom-id="vgqcolqiepoliqsomiyljswpbpwviqeqybcq">
            <p class="brz-fs-sm-17 brz-lh-lg-1_9 brz-lh-sm-im-1_6 brz-lh-xs-im-1_6 brz-ls-lg-0 brz-ls-sm-im-0 brz-ls-xs-im-0 brz-ff-overpass brz-ft-google brz-fw-lg-400 brz-fw-sm-im-400 brz-fw-xs-im-400 brz-text-lg-justify brz-text-xs-center brz-text-sm-right brz-fs-lg-24 brz-fs-xs-im-23"><a href="tel:+18333580460" style="color: rgb(0, 0, 0);" class="link--external" data-brz-link-type="external">+1 (800) 123-4567</a></p>
        </div>
    </div>
</div>

问题是它在这里的 JsFiddle 中有效，但在我的页面中无效。我尝试添加!important没有成功。我不知道如何解决问题。任何帮助，将不胜感激。

编辑：这是一个复制问题的测试页面https://1on1finance.com/test/

标签： csswordpress

解决方案

它不起作用的原因是这个 CSS http://prntscr.com/uiwac5

html body  div[id^="hi-call-button1"] a.link--external {
    text-decoration: underline !important;
}

使用上面的 CSS 这将覆盖您网站中的 CSS。

请清除您的自动优化缓存以反映 CSS 更改。

推荐阅读