Question

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

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

相关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>

要自己查看结果，请查看代码段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您

.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 2

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

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

标签和伪元素（：之前，之后等）
类，属性，伪类（例如：悬停）
的ID

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

在您的情况下，如果您绝对希望您的.top_td样式随时可用，您可以将选择器设置为类似.TableDIV #top_table td.top_td的内容。

Answer 3

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

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

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

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

3 个答案: