Question

我有一些内联CSS我无法改变

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

stuff

</span>

它覆盖了我的外部CSS。我试过把！重要的

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

but it had no effect

如果我去检查元素并删除样式属性，我的外部CSS works

Answer 1

更新1

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

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

＆＃13;

.change p {
  color: pink !important;
}

＆＃13;

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

＆＃13;

如果在挂钩到CSS类选择器时有很多子元素要通过，那么您可能必须使用CSS选择器更具体。尝试挂钩最接近您要定位的元素的CSS类选择器。

＆＃13;

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

＆＃13;

<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>

＆＃13;

原始答案

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

请看下面的两个例子。

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

＆＃13;

.change {
  color: pink !important;
}

＆＃13;

<!-- #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>

＆＃13;

！important不是重写内联CSS

1 个答案:

更新1

原始答案