Question

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

在以下代码中，表格单元格引用.full，图片代码引用.imageblock和.icon，并且有一个特定的.full img样式我的CSS。我的问题是每种风格都略有不同，所以我怎么知道要编辑哪一种风格。此外，在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;
}

wher upper优先于lower

最后，我知道这不是你的代码，而是尽可能地避免！重要的，因为当你真的需要它们时，它们将不起作用。

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

2 个答案: