如何将 CSS 应用于被 Wordpress 反垃圾邮件功能混淆的电子邮件地址？

Question

我正在使用 WordPress 反垃圾邮件程序代码，来自他们的代码参考：

https://developer.wordpress.org/reference/functions/antispambot/

它工作正常，但我想设置代码显示的电子邮件地址的样式。如果混淆的电子邮件地址位于页脚中，我想应用特定样式，但如果混淆的电子邮件地址位于页面正文中，例如，我想应用不同的样式。

我已经尝试为标签添加标题属性，如下面的代码所示：

function wpcodex_hide_email_shortcode( $atts , $content = null ) {
    if ( ! is_email( $content ) ) {
        return;
    }

    return '<a href="mailto:' . antispambot( $content ) . '" title="encrypted-email">' . antispambot( 
    $content ) . '</a>';
}
add_shortcode( 'email', 'wpcodex_hide_email_shortcode' );

然后使用以下 CSS 设置样式：

/* GENERAL STYLE FOR ENCRYPTED EMAILS */

a[title="encrypted-email"]{
    color:#4472e6 !important;
    text-decoration:none !important;
}

a[title="encrypted-email"]:hover{
    text-decoration:underline !important;
}

/* STYLE FOR ENCRYPTED EMAILS IN FOOTER */

.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]{
    color:#ff0000;
    text-decoration:none !important;
}

.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]:hover{
    color:#e4d06f;
}

但是，使用上面的 CSS，所有加密电子邮件，包括页脚中的加密电子邮件，都采用“常规”样式。

我想知道这种方法是否是为页面不同部分（例如正文与页脚）中的加密电子邮件设置不同 CSS 样式的最佳方法。

另外，我的 CSS 是否正确？

更新

生成的HTML如下：

<ul style="list-style-type:none; margin:0; padding:0;">
    <li style="font-size:16px; margin-bottom:0px;"><a 
        href="mailto:&#119;&#98;u&#64;&#98;&#100;" 
        title="encrypted-email">&#119;&#98;&#117;&#64;&#98;&#100;</a></li>
</ul>

Answer 1

1.您遇到的问题是因为在您的 CSS 规则中使用了 !important。 在您的 a[title="encrypted-email"] 规则中使用它意味着它们将优先于更具体的“页脚”规则。

为了使您的页脚规则优先，最好的选择是从主a[title="encrypted-email"] 中删除!important - 通常不鼓励使用!important，因为它会导致类似这样的问题。

如果不可能，您需要在所有更具体的规则上使用!important 来覆盖!important 样式。 （假设规则与您的实际 HTML 元素匹配），以下应该可以工作：

/* STYLE FOR ENCRYPTED EMAILS IN FOOTER */

.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]{
    color:#ff0000 !important;
}

.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]:hover{
    color:#e4d06f !important;
}

• 注意 - 您实际上并不需要 !important 来进行文本装饰，因为您不会从它所覆盖的样式规则中更改它。

2。您还问过您是否应该为此设置 CSS 规则。 是的，这是设置样式的正确方法 - 这就是 CSS 名称的 cascading 部分的含义.覆盖样式所需的只是使用更具体的选择器，例如您可以说“页脚小部件中的加密电子邮件链接”，而不是“加密的电子邮件链接”。

所以.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"] 通常适用于您的页脚电子邮件（即，如果其他规则不使用!important)，因为它更具体（只要具有.custom-html-widget 类的元素中的电子邮件地址是在一个类的元素中.fusion-footer-widget-area当然！）