内联 CSS 工作得非常好。 CSS File 类部分工作

Question

我偶然发现了一个奇怪的问题。我正在用 CSS 设计一个表格。当我给 <td> 元素一个具有背景渐变和一些基本文本样式的类时，渐变效果非常好，但文本样式被完全忽略了。

当我从 CSS 类中删除文本样式并将其添加到带有 style="" 的内联 CSS 时，它工作得非常好！现在我不是设计师，所以我只是在某个地方错过了一些东西，但这对我来说似乎很奇怪。

相关CSS：

.top_td {
    background:-o-linear-gradient(bottom, #001e5b 5%, #00153e 100%);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #001e5b), color-stop(1, #00153e) );
    background:-moz-linear-gradient( center top, #001e5b 5%, #00153e 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#001e5b", endColorstr="#00153e");
    background: -o-linear-gradient(top,#001e5b,333333);background-color:#00153e;
    text-align:center;
    font-size:14px;
    font-family:Verdana;
    font-weight:bold;
    color:#ffffff;
}

相关 HTML：

<tr>
    <td class="top_td" style="">
        <strong>WELKOM</strong>
    </td>
    <td class="top_td">
        <strong>OPENINGSTIJDEN</strong>
    </td>
    <td class="top_td">
        <strong>ADRES</strong>
    </td>
</tr>

<tr>
    <td class="top_td" style="text-align:center;font-size:14px;font-family:Verdana;font-weight:bold;color:#ffffff;">
        <strong>INLINE CSS</strong>
    </td>
    <td class="top_td" style="text-align:center;font-size:14px;font-family:Verdana;font-weight:bold;color:#ffffff;">
        <strong>WORKS</strong>
    </td>
    <td class="top_td" style="text-align:center;font-size:14px;font-family:Verdana;font-weight:bold;color:#ffffff;">
        <strong>PERFECTLY FINE</strong>
    </td>
</tr>

要自己查看结果，请查看代码 sn -p：

.TableDIV {
	margin:0px;padding:0px;
	width:100%;
	
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
	
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
	
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
	
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px;
}
.TableDIV table{
    border-collapse: collapse;
    border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}
#top_table tr:last-child td:last-child {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
}
#top_table tr:first-child td:first-child {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px;
}
#top_table tr:first-child td:last-child {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
}
#top_table tr:last-child td:first-child{
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
}
.TableDIV td{
	vertical-align:middle;
	text-align:left;
	padding:0;margin:0;
	font-size:10px;
	font-family:Verdana;
	font-weight:normal;
	color:#000000;
}
.top_td {
	background:-o-linear-gradient(bottom, #001e5b 5%, #00153e 100%);
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #001e5b), color-stop(1, #00153e) );
	background:-moz-linear-gradient( center top, #001e5b 5%, #00153e 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#001e5b", endColorstr="#00153e");
	background: -o-linear-gradient(top,#001e5b,333333);background-color:#00153e;
	text-align:center;
	font-size:14px;
	font-family:Verdana;
	font-weight:bold;
	color:#ffffff;
}

<div class="TableDIV">
	<table id="top_table">
		<tr>
			<td class="top_td" style="">
				<strong>IN CSS</strong>
			</td>
			<td class="top_td">
				<strong>FILE</strong>
			</td>
			<td class="top_td">
				<strong>DOESN'T WORK</strong>
			</td>
		</tr>
		<tr>
			<td style="background: #777777;text-align:center;">
				<img src="http://www.petervanderleegte.nl/images/IMG_6317.JPG" style="margin:0; padding:0; width: 130px;">
			</td>
			<td style="vertical-align: top;background: #777777;">
				<table style="border-left: 1px solid #333; border-right: 1px solid #333;">
					<tbody>
						<tr style="background-color: #989898;">
							<td>Maandag:</td>
							<td style="font-style: italic;">08:00 - 17:00</td>
						</tr>
						<tr>
							<td>Dinsdag:</td>
							<td style="font-style: italic;">08:00 - 17:00</td>
						</tr>
						<tr style="background-color: #989898;">
							<td>Woensdag:</td>
							<td style="font-style: italic;">08:00 - 17:00</td>
						</tr>
						<tr>
							<td>Donderdag:</td>
							<td style="font-style: italic;">08:00 - 17:00</td>
						</tr>
						<tr style="background-color: #989898;">
							<td>Vrijdag:</td>
							<td style="font-style: italic;">08:00 - 17:00</td>
						</tr>
						<tr>
							<td>Zaterdag:</td>
							<td style="font-style: italic;">Op afspraak</td>
						</tr>
						<tr style="background-color: #989898;">
							<td>Zondag:</td>
							<td style="font-style: italic;">Gesloten</td>
						</tr>
					</tbody>
				</table>
			</td>
			<td style="vertical-align: top;background: #777777;">
				Dummy data <br />
				TODO: Address info
			</td>
		</tr>
		<tr>
			<td class="top_td" style="text-align:center;font-size:14px;font-family:Verdana;font-weight:bold;color:#ffffff;">
				<strong>INLINE CSS</strong>
			</td>
			<td class="top_td" style="text-align:center;font-size:14px;font-family:Verdana;font-weight:bold;color:#ffffff;">
				<strong>WORKS</strong>
			</td>
			<td class="top_td" style="text-align:center;font-size:14px;font-family:Verdana;font-weight:bold;color:#ffffff;">
				<strong>PERFECTLY FINE</strong>
			</td>
		</tr>
	</table>
</div>

Answer 1

有一个称为选择器特异性的概念，这意味着将根据选择器的具体程度应用样式。如果您有多个应用于同一元素的样式声明，则将应用最具体的一个。例如，.top_td 样式将被应用，但.TableDIV td 中定义的声明将覆盖.top_td 中的声明，因为选择器更具体。

选择器去（从最不具体到最具体）：

1. 标签和伪元素（:before、:after 等）
2. 类、属性、伪类（例如：悬停）
3. ID

在此处查看更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

如果您绝对希望您的 .top_td 样式在任何时候都能正常工作，您可以将选择器设置为 .TableDIV #top_table td.top_td 之类的东西，例如。

Answer 2

你的

.TableDIV td {
    vertical-align: middle;
    text-align: left;
    padding: 0;
    margin: 0;
    font-size: 10px;
    font-family: Verdana;
    font-weight: normal;
    color: #000000;
}

正在覆盖您的 .top_td。 您可以为每种样式设置 !important 喜欢

.top_td {
    background:-o-linear-gradient(bottom, #001e5b 5%, #00153e 100%) !important;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #001e5b), color-stop(1, #00153e) ) !important;

Answer 3

如果两个选择器应用于同一个元素，则具有更高特异性的选择器获胜。

.TableDIV td 选择器覆盖.top_td 选择器

你可以参考：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/