内联造型vs！imporant造型

Question

以下哪项更合适：

<div class="someClass">

.someClass{
    color: blue !important;
}


or 

<div style="color:blue;">

在我的书中，这些都是错的，但如果我必须在一个或另一个之间做出选择，我应该选择哪个？

这是一个小例子：

https://jsfiddle.net/jfakey/zaot4c1y/1/

在其中，您可以看到几个不同的例子，说明它们的工作原理。

Answer 1

这是两个完全不同的概念。

!important

的重要性

!important将强制将使用它的任何样式应用于受影响的元素，并优先于任何现有声明，包括内联声明：

<!-- This element will actually appear blue due to your !important style -->
<div class="someClass" style='color:red'>or</div>

Precedence and Specificity在确定哪些样式不适用于元素时，在CSS中起着至关重要的作用。 !important声明本质上是一种在开发人员认为必要的情况下绕过这些规则的机制。

关于内联样式

除非在使用!important的情况下，否则内联样式通常会被赋予高优先级并且应该应用。此外，对于单个样式，内联样式通常可以很好，但如果您发现自己多次使用相同的样式：

<div style='font-weight: bold; text-align: center; color: purple'>...</div>
<div style='font-weight: bold; text-align: center; color: purple'>...</div>
<div style='font-weight: bold; text-align: center; color: purple'>...</div>

那么你最好只是定义一个所有这些元素都可以使用的样式：

.purple-centered-bold {
     font-weight: bold; text-align: center; color: purple;
}

以及：

<div class='purple-centered-bold'>...</div>
<div class='purple-centered-bold'>...</div>
<div class='purple-centered-bold'>...</div>

这不仅可以让您的标记看起来更清晰，而且还可以使您的代码更易于维护（即，可以在单个CSS样式中进行任何更改，并将其应用于使用它的所有元素）。

示例

＆＃13;

＆＃13;

.someClass{
    color: blue !important;
}

＆＃13;

<div class="someClass" style='color:red'>class="someClass",style="color:red"</div>
<div style='color:red'>style="color:red"</div>
<div style="color:blue;">style="color:blue"</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

轻微的内联样式并不是什么大问题，但如果你的html开始看起来像这样：

<div style="color:blue; font-weight: bold; background-color: white; font-family: cursive">

然后你应该把样式放在CSS中。 !important将使该样式属性覆盖尝试设置样式的任何其他内容，例如bootstrap css。 !important只是为了确保您的自定义样式不会搞砸，如果您安装了一些试图默认设置内容样式的包。

Answer 3

如果有很多HTML，使用Class是更好的选择。因此，您可以避免在多个位置编写内联样式。如果仅使用与div内联的特定情况是最佳方式。