!important无法覆盖内联CSS。

Question

!important无法覆盖内联CSS。

6

我有一些无法更改的内联CSS

<span style = "color: #404040; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 17px;">

stuff

</span>

它正在覆盖我的外部CSS。我尝试使用 !important。

.product-description 
{
  font-family:wide latin !important;
}

但是它没有效果

如果我去检查元素并删除样式属性，我的外部CSS 就可以生效了

- abcdefg4321

@hungerstar 啊，抱歉。我以为内联样式也是!important的。看错了。 - Hunter Turner

如果字体名称是Wide Latin，请尝试用引号括起来font-family: "Wide Latin" !important;，看看是否有任何效果。 - Robert

@hungerstar 我唯一能够访问的就是 CSS 文件。 - abcdefg4321

@RobertC 没有起作用 - abcdefg4321

你能展示更多的代码吗？具体来说，可以显示出.product-description与你上面显示的span之间的关系。你可能需要调整你的选择器，使其类似于.product-description span {}或类似的内容。 - Robert

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hungerstar · Accepted Answer

更新1

OP提到他们只能访问CSS文件。

在这种情况下，您需要稍微更改一下CSS选择器，但仍然可行。下面的示例将类应用于要更改的元素的父元素。

.change p {
  color: pink !important;
}

<div class="change">
  <p style="color: blue;">
    This is some text.
  </p>
</div>

如果在连接到CSS类选择器时需要浏览大量子元素，您可能需要更具体。尝试连接到与要定位的元素最接近的CSS类选择器。

.change div p:nth-child(2) {
  color: pink !important;
}

<div class="change">

  <p style="color: blue;">
    This is some text.
  </p>

  <div>

    <p style="color: green;">
      This is some text.
    </p>

    <p style="color: orange;">
      This is some text. (only change me)
    </p>

  </div>

</div>

原始答案

我猜你没有直接将 CSS 类应用于要更改的元素，因为我没有看到示例<span>中应用.product-description。

看看下面的两个示例。

我认为你正在尝试这个，将类应用于要更改的外部元素。<p>将继承.change的颜色，如果<p>没有具有更高特异性的东西，例如内联 CSS 或另一个 CSS 类。
在这里，我们直接将类应用于要更改的元素，这样!important的特异性可以覆盖内联 CSS 的特异性。

.change {
  color: pink !important;
}

<!-- #1 -->
<div class="change">
  <p style="color: green;">
    This is some text.
  </p>
</div>

<!-- #2 -->
<div>
  <p class="change" style="color: green;">
    This is some text.
  </p>
</div>