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

我偶然发现了一个奇怪的问题。我正在用CSS设计一个表格。当我给

元素一个带有背景渐变和一些基本文本样式的类时，渐变效果非常好，但是文本样式被完全忽略

当我从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>

CSS中的
文件
不起作用
马恩达格：
08:00 - 17:00
丁斯达克：
08:00 - 17:00
沃恩斯达格：
08:00 - 17:00
东德达格：
08:00 - 17:00
Vrijdag：
08:00 - 17:00
扎特达格：
阿夫斯普拉克酒店
宗达：
格斯洛滕
虚拟数据

TODO:地址信息
内联CSS
有效
非常好

您的

正在覆盖您的.top\td。 你可以设定！对每种风格都很重要 像

---

有一个称为选择器专用性的概念，这意味着将根据选择器的专用性应用样式。如果有多个样式声明应用于同一元素，则将应用最具体的样式声明。例如，将应用

.top\u td

样式，但

.TableDIV td

中定义的声明将覆盖

.top\u td

中的声明，因为选择器更具体

选择器（从最不特定到最特定）：

标记和伪元素（：before，：after等）

类、属性、伪类（例如：悬停）

身份证

请参阅此处的更多信息：

---

在您的情况下，如果您绝对希望.top_td样式在任何时候都能工作，您可以将选择器设置为类似于

.TableDIV#top_table td.top_td

。

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

.TableDIV td

选择器覆盖

.top\u td

选择器

---

你可以参考：

这确实解决了问题！不过我觉得这有点奇怪，因为我一直认为CSS是自上而下工作的。这意味着我的

top\u td

类应该覆盖

TableDIV td

？可能是我。无论如何，非常感谢！这里有一个关于css的好参考：-哇，非常感谢！这解释了为什么它没有像我预期的那样工作！

.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%) !important;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #001e5b), color-stop(1, #00153e) ) !important;