Css Overwrite 问题 - 更改外部样式的范围答案

【问题标题】：Css Overwrite issue - Change the scope of external stylesCss Overwrite 问题 - 更改外部样式的范围
【发布时间】：2021-04-22 12:40:28
【问题描述】：

我的网站从 ebay 产品中抓取信息，对于产品的描述，我得到了所有的 html。产品描述具有内联样式，当我在我的网站上打开产品描述时，产品 css 覆盖了我的 css 正常：

在我打开产品描述后

这是来自开发者工具的锚样式

所以我需要知道如何将 ebay 产品 css 与我的 css 分开。我认为的一种方法是将!important 添加到我所有的样式中，但我认为这个解决方案并不优雅，我想要别的东西。因此，如果您对如何解决我的问题有任何建议，我将不胜感激。

【问题讨论】：

这能回答你的问题吗？ Remove inline css of an HTML elements
不，我不想删除外部 css 样式，因为它会影响整个产品描述，但我想保持与 ebay 相同。
嘿，你能再解释一下吗，你想同时保留来自ebay的风格和你的个人风格吗？如果不是，您可以使用 javacsript 删除来自 ebay 产品的 html 的内联样式
我有两个选择，ebay Api 和 php，第二种方法是 node js 爬虫，我现在想到的想法是从所有元素中获取所有样式属性，然后放置它们到页面顶部有一些类，我认为这样可以解决我的问题
那么你想删除什么？你想保留什么？

标签： html css

【解决方案1】：

如果您想删除所有现有样式并将其重置为默认值，您可以使用：

  all: initial;

【讨论】：

嗯，我不知道属性“all”，谢谢，我会详细了解它

【解决方案2】：

在元素中创建一个您希望覆盖默认 CSS 的自定义内联 CSS 属性。以下是创建用于覆盖锚属性的内联 CSS 的方法。

这里是怎么做的：在元素内创建锚的图标/文本并提供内联 CSS

<a href="http://www.example.com" target="_blank">
    <span style="color: #ffffff !important;" >icons</span>
</a>

在 Chrome 中的快速测试表明

a:visited * { ... !important}

确实会覆盖内联样式，但将 !important 添加回 span 效果很好。

<span style="color: #ffffff !important;" >

为了更好地理解它。在这里学习Overwriting Hover in anchor Overwriting visited in anchor

块引用

【讨论】：

【解决方案3】：

也许您需要更新您的css 以更具体地使用它的选择器，例如，如果您有一个 HTML 结构，可以像这样区分来自 eBay 的产品描述容器

.leftbar {
  float: left;
  width: 20%;
  background: #ccc;
}

a { /*think of this as default link style*/
  color: black;
}

#main div:not(.product-desc) a {  /*more specific selector*/
  display: block;
  color: red;
}

a { /*this one is from eBay*/
  color: green;
}

<div id='main'>
  <div class='leftbar'>
    <a>Hello</a>
    <a>World</a>
  </div>
  <div class='product-desc'>
    <a>Description</a>
    <a>Product</a>
  </div>
</div>

您可以使用:not 选择器来定义您的主要风格，这样它就不会被 eBay 风格打乱

您的选择器越具体，就会使用您的样式。但是，如果您的选择器相同，则将应用自上而下的最后一条规则。所以在上面的例子中，product-desc里面的链接颜色设置为green而不是black

【讨论】：

好的，谢谢，我会尽量这样做:)