css - 如何禁用 css :not pseudo class on linked social icons

Question

: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 的方法:不是伪类声明。

注意代理 href 值这个片段是功能:不是我的 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 伪类，这样它就不需要影响页面构建器生成的社交图标，同时仍然可以指示页面中指向外部网站的链接？如果是怎么办？

Answer 1

有时我(我们)对一个问题想得太多，而解决方案就在我(我们)面前。我今天下午意识到这一点，现在回答我自己的问题。

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

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

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