如何禁用css：链接社交图标上的非伪类答案

【问题标题】：How to disable css :not pseudo class on linked social icons如何禁用css：链接社交图标上的非伪类
【发布时间】：2019-08-04 22:14:34
【问题描述】：

:not 伪类用于将 svg 图标附加到网站中链接到外部网站的所有链接元素。我需要帮助禁用页面构建器生成的链接社交图标上的 :not 伪类声明。

网站由我自己的 HTML、CSS 和主页脚本组成，网站的其余部分由 Elementor 生成；一个 WordPress 页面构建器。页面构建器配置为使用我的 style.css 文件，其中包含 :not 伪类实现，我可以定位页面构建器使用脚本生成的任何内容。

页面构建器为链接的社交图标生成 HTML 和 CSS。当在浏览器中构建页面时，:not 伪类将 svg 图标附加到页面构建器生成的链接社交图标上，并且社交图标在视觉上被附加的 svg 图标破坏。

每个人都知道 Facebook 和 LinkedIn 是外部网站，社交图标链接不需要我无法禁用的 svg 图标，因此来这里寻求帮助。

我可以使用我的 CSS 和/或我的 jQuery 成功定位页面中的社交图标，但我尝试过的 CSS 和 jQuery 未能成功选择性地禁用 :not 伪类。

我使用了 !important 导致社交图标在页面中消失。

我曾尝试使用另一个透明的 svg 图标来替换外部链接图标，但很可能没有成功，因为我可能使用了不正确的 CSS。

我已经搜索了 stackoverflow 并阅读了类似的问题以及搜索了 WWW 并没有找到一种方法来选择性地应用 CSS :not 伪类声明。

注意代理 href 值，这个 sn-p 是正常运行的 :not 伪类，正如我在 style.css 文件中声明的那样：

/* functional as expected */
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]) {
background: transparent url(assets/svg/layout/svg_link-external-11px.svg) no-repeat center right;
padding-right: 16px; }

CSS 和属性选择器的使用可以更改社交图标的属性，但我尝试过的所有迭代在尝试禁用或破坏 svg 图标的显示时均未成功：

/* non-functional */
li.eael-team-member-social-link > a[href ^="https://facebook.com"] {
    background: none; }

// non-functional
$( "li.eael-team-member-social-link > a[href ^='https://facebook.com']" ).css( "background", "none" );

是否可以有选择地禁用 :not 伪类，这样它就不需要影响页面构建器生成的社交图标，同时仍然用于指示页面中的链接到外部网站？如果有怎么办？

【问题讨论】：

标签： css pseudo-class

【解决方案1】：

有时我（我们）想多了一个问题，而解决方案却是盯着我（我们）的脸。我今天下午意识到了这一点，现在为我自己的问题提供一个答案。

:not 伪类支持链接，正如我上面的 sn-p 示例所示，所以我意识到只需要做的就是防止将外部图标附加到链接到外部站点（或任何其他外部站点）的社交图标上) 将这些 TLD 添加到链中，如下所示：

a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]):not([href *="facebook.com"]):not([href *="linkedin.com"])

注意：我在 Google 上搜索并查看了有关标记我自己对自己问题的答案的常见问题解答。当我的答案被提交时，通知告诉我我明天可以返回以将其标记为正确答案。我会做的。

【讨论】：