如何在链接的社交图标上禁用 css :not pseudo class

Question

:not pseudo-class 用于将 svg 图标附加到网站中的所有 linked 元素，这些元素 link 到外部站点。我需要帮助禁用页面构建器生成的 linked 社交图标上的 :not pseudo-class 声明。

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

页面生成器为 linked 社交图标生成 HTML 和 CSS。当在浏览器中构建页面时，:not pseudo-class 将 svg 图标附加到页面构建器生成的 linked 社交图标，社交图标在视觉上被附加的 svg 图标破坏。

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

我可以使用我的 CSS and/or 我的 jQuery 成功定位页面中的社交图标，但是我尝试过的 CSS 和 jQuery有选择地禁用 :not pseudo class 是不成功的。

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

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

我搜索了 Whosebug 并阅读了类似的问题以及搜索了 WWW，但没有发现有选择地应用 CSS :not pseudo-class 声明的方法。

注意此代码段的代理 href 值是正常运行的：不是伪 class，如我的 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 pseudo-class，这样它就不会影响页面构建器生成的社交图标，同时仍能在页面中指示 links到外部网站？如果有怎么办？

Answer 1

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

:not pseudo-class 支持链接，正如我上面的代码片段示例所示，所以我意识到需要做的就是防止将外部图标附加到链接到外部网站（或任何其他外部站点）将这些 TLD 添加到链中，如下所示：

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

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

如何在链接的社交图标上禁用 css :not pseudo class

How to disable css :not pseudo class on linked social icons

css

pseudo-class