单独的 css 引用中的多个类样式

Question

从我解释别人的编码开始，这是电子邮件编码。

在以下代码中，表格单元格引用.full，图像代码引用.imageblock 和.icon，并且在我的CSS 中有一个特定的.full img 样式。我的问题是每种样式都有一些细微的不同，所以我怎么知道要编辑哪一个。此外，在 CSS 中有两个 .icon 引用。为什么这些是分开的而不是在一起的？

代码如下：

.full {
  display: block;
  width: 100%;
  !important
}

.full img {
  display: block;
  !important;
  width: 30% !important;
  margin: 0 auto !important;
}

.imageBlock {
  display: block !important;
  height: auto !important;
  width: 100% !important;
}

.icon {
  padding-left: 0 !important;
}

.icon {
  padding-left: 25px;
}

<td width="25%" dir="ltr" class="full">
  <img src="https://okcu-uga.edu.185r.net/graphics/okcu-uga/JSF201920/email/icon-badge.gif" width="100" height="100" class="imageBlock icon" />
</td>

Answer 1

编辑.imageblock，因为该人已将属性强制到该选择器。 Here is more info about CSS Specificity

并且有两个.icon 规则，因为前一个开发人员不知道他在做什么：p，删除第二个。

Answer 2

为什么它们是两个具有相同规则的 .icon ？也许编码器找不到第二个并写了第一个，设置重要以绕过第二个？

然后为了知道顺序，有一个神奇的方法是用开发工具打开它，如果用chrome检查img，我可以看到以下顺序：

.full img {
  display: block;
  width: 30% !important;
  margin: 0 auto !important;
}
.icon {
  overwritten by important rule below---padding-left: 25px;
}
.icon {
  padding-left: 0 !important;
}
.imageBlock {
  display: block !important;
  height: auto !important;
  width: 100% !important;
}
img[Attributes Style] {
  width: 100px;
  height: 100px;
}

上部优先于下部

最后，我知道这不是您的代码，但尽可能避免使用 !important，因为当您真正需要它们时，它们将不起作用。