【问题标题】:CSS class precedence and why I did I have to use the !important override? [duplicate]CSS 类优先级以及为什么我必须使用 !important 覆盖? [复制]
【发布时间】: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 属性顺序。
  • 只有样式表里面的顺序很重要。

标签: html css


【解决方案1】:

如果你改变floatRighttextWhite的css定义顺序(textWhite的css样式写在floatRightafter),你不需要描述@ 987654325@ textWhite 风格。

floatRighttextWhite 是常用的样式,所以最好去掉floatRight 选择器上的颜色样式。

.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;
}

【讨论】:

  • 我不想从floatRight 中删除color: gray;,因为它会破坏我的整个设计,我必须创建一个新的.textGray 类并更新我所有的XSL 转换脚本.
  • 我更改了类定义的顺序并删除了!important 覆盖。一切顺利!
猜你喜欢
  • 2012-11-05
  • 2020-08-19
  • 1970-01-01
  • 2012-01-31
  • 2012-05-29
  • 2019-03-03
  • 2016-05-11
  • 1970-01-01
  • 2011-10-19
相关资源
最近更新 更多