我该如何使用外部CSS覆盖内联样式？

Question

我有一些使用内联样式的标记，但我无法更改这些标记。如何仅使用CSS覆盖文档中的内联样式？我不想使用jQuery或JavaScript。

HTML：

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

CSS：

div {
   color: blue; 
   /* This Isn't Working */
}

- Mr. Alien

---

另请参阅CSS级联顺序。 - djvg

Answer 1

覆盖内联样式的唯一方法是在CSS规则旁边使用!important关键字。以下是一个例子。

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

重要提示:

• 使用 !important 不被视为良好实践。因此，您应该避免同时使用 !important 和内联样式。

• 为任何CSS规则添加 !important 关键字都会让该规则 强制优先于该元素的所有其他CSS规则。

• 它甚至还会覆盖来自标记的内联样式。

• 覆盖的唯一方法是使用另一个!important规则，在CSS中具有更高的特殊性或在代码后面具有相等的特殊性声明。

• 必读 - 由MDN提供的CSS特殊性文档

- Rohit Agrawal

---

那个样式部分就交给他了，实际上他不一定只是用来覆盖内联CSS的。 - Rohit Agrawal

我知道，但是我要说的是！重要性（!important）只会增加特定属性的分数，他可能在同一个块中使用其他属性（而不是用于覆盖）。 - Rohit Agrawal

为什么!important是不良实践？ - Sinister Beard

@BFDatabaseAdmin 因为如果您需要进行任何特殊情况的覆盖，您将无法后期覆盖它。 - Rohit Agrawal

@BFWebAdmin，问题在于有时候选择权不在你手上。例如，“新不可见 reCAPTCHA”的“徽章”可以被样式化，但是部分内联样式无法避免，因此你必须通过这种方式或 JS 来覆盖它们，而我更偏爱纯 CSS 解决方案。 - My1

Answer 2

在文档中，内联样式具有最高优先级。例如，如果您想将div元素的颜色更改为blue，但是您有一个内联样式，其中设置了color属性为red。

<div style="font-size: 18px; color: red;">
   Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

那么，我应该使用jQuery/Javascript吗？答案是不

我们可以使用element-attr CSS选择器与!important，请注意，这里!important很重要，否则它将无法覆盖内联样式..

<div style="font-size: 30px; color: red;">
    This is a test to see whether the inline styles can be over ridden with CSS?
</div>

div[style] {
   font-size: 12px !important;
   color: blue !important;
}

演示

注意：仅使用 !important 在这里可以工作，但我已经使用了 div[style] 选择器来专门选择具有 style 属性的 div

- Mr. Alien

---

所以，我应该使用内联样式吗？- 答案是 不 :-) - PeeHaa

所以，我应该使用jQuery/JavaScript吗？- 答案是否定的。 为什么呢？如果我在一个环境中工作（例如Sharepoint），其中行内样式由无法控制的实体添加到元素中，为什么我不使用Jquery删除有问题的行内样式，以便我的站点外部主题显示出来？这似乎是比在稍后可能想要覆盖的特定实例中炸掉!important更加精确的解决方案。 - Neberu

@Neberu - 因为JS可以在浏览器中被阻止/关闭。而使用!important则不能（据我所知）。 - Tony

另外，我认为 JavaScript 总体上不好，我的意思是你会打开来自未知人员的可执行文件吗？我想不会，但浏览器每次点击都会这样做。 - My1

Answer 3

您可以轻松覆盖内联样式，除了内联!important样式。

因此，

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This will  Work */
}

但是如果你有

<div style="font-size: 18px; color: red !important;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This Isn't Working */
}

现在它只会是红色..而且你无法覆盖它。

- IE kills stay away from it

---

这有什么不同于几个月前添加的答案呢？ - Sinister Beard

@BFDatabaseAdmin 这个答案描述了内联样式带有!important时的行为，其他答案中没有涉及到这一点。这可能不是一个完全独立的答案，但它与其他提供的答案不同。 - grg

不过，使用带有important的内联样式真的很过头了，因为默认情况下它已经具有最高优先级。 - My1

Answer 4

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

以下是更多详细信息的链接：http://css-tricks.com/override-inline-styles-with-css/。该链接涉及IT技术中如何使用CSS覆盖内联样式的相关内容。

- jroi_web

---

因为它不起作用而被踩。 - Dev

Answer 5

在你的CSS声明中使用!important

div {
   color: blue !important; 

   /* This Is Now Working */
}

- fruitloaf

Answer 6

div {
 color : blue !important;
}

<div style="color : red">
  hello
</div>

- Syed Akhter

Answer 7

使用CSS属性中的!important。

<div style="color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
        color: blue !important;
    }

- Vishal Vaghasiya