【发布时间】:2020-04-12 23:47:42
【问题描述】:
这只是一个基本示例:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.rowDate {
background-color: #28456c;
color: #fff;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.textWhite {
color: #fff;
}
</style>
</head>
<body>
<table>
<tr class="rowDate">
<td>
<div class="floatRight textWhite">
This is some text</div>
</td>
</tr>
</table>
</body>
</html>
Microsoft Expression Web 中的结果:
在这个示例中,它正在做我想做的事,但基本原则就在那里。我希望textWhite 的文本颜色优先。这在here 中表示:
最后一个优先。查看下面的链接,您似乎可以使用
! important规则来覆盖正常行为。
然而,当我使用更完整的 HTML / CSS 代码时(显示在 CHtmlView 中,它忽略了 .textWhite 样式。当我在浏览器中查看它时,它是这样的:
我让它工作的唯一方法是使用!important:
为什么我必须这样做?我无法展示完整的 HTMl / CSS,因为它非常冗长并且包含真实姓名。但如果我必须准备一个完整的样本,我会的。
更新
这是我的实时 CSS 文件中的 sn-p:
.textWhite {
color: #fff !important;
}
.containerMeeting {
margin-bottom: 3mm;
}
.cellBibleReading {
padding-left: 3mm;
font-size: 11pt;
font-weight: 700;
text-transform: uppercase;
border-right-style: none;
}
.cellNotes {
font-size: 10pt;
font-style: italic;
}
.cellTime {
padding-left: 3mm;
padding-right: 5mm;
font-size: 9pt;
font-weight: 700;
color: gray;
}
.cellTheme {
border-right-style: none;
}
.cellPosition {
color: gray;
padding-right: 2mm;
text-align: right;
font-size: 8pt;
font-weight: 700;
vertical-align: middle;
text-transform: none;
border-left-style: none;
}
.cellName {
font-size: 10pt;
font-weight: normal;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
我可以看到我在.floatRight 之前定义了.textWhite。所以你在 cmets 中说重要的是我定义类的顺序,而不是我在 class 属性中声明它们的顺序?
【问题讨论】:
-
您可以清楚地看到 floatRight 在(第 100 行)之后而不是 textwhite(第 59 行)。不要按顺序传递,而是增加特异性
-
类内的顺序无关紧要
-
带有
!important的订单将被忽略。另一方面,将遵循两个!important属性顺序。 -
只有样式表里面的顺序很重要。