表格标题中超链接的 CSS 不适用

Question

>我有以下用于表格的CSS。我现在在表头中添加了一个超链接，但我为其添加的 CSS 似乎不适用于 ！important。当我在开发工具中查看时，它看起来好像正在为 Bootstrap 文件中设置的基本标记应用 CSS。我无法 100% 确认这一点，因为我使用的是 LESS，而开发工具只是显示它来自我编译的站点.css文件。

我复制了适用于thead > tr > th的 CSS，并从中添加了 a.ess-table 类。

.ess-table > thead > tr > th, 
.ess-table > tbody > tr > th, 
.ess-table > tfoot > tr > th { 
    background-color: #0078d2; 
    color: white; 
}
a.ess-table > thead > tr > th { 
    background-color: #0078d2;
    color: white !important;
    text-decoration: none !important;
}

但这似乎是基于开发工具应用的。

a {
    color: #0078d2;
    text-decoration: none;
}

这是 HTML

<table class="table ess-table">
    <thead>
        <tr>
            <th style="width:80px;">
                <a href="#" id="approveAll">Approve</a>
            </th>
            <th style="width:80px;">
                <a href="#" id="denyAll">Deny</a>
            </th>
            <th>Shift Date</th>
            <th>Employee</th>
            <th>Schedule</th>
        </tr>
    </thead>
    <tbody>....</tbody>
<table>

我是否需要创建一个特定的类来直接应用于标头中的标记？

Answer 1

你的a在你的css的错误一侧。 它应该是：

.ess-table > thead > tr > th a { 

而不是

a.ess-table > thead > tr > th { 

a {
    color: #0078d2;
    text-decoration: none;
}
.ess-table > thead > tr > th, 
.ess-table > tbody > tr > th, 
.ess-table > tfoot > tr > th { 
    background-color: #0078d2; 
    color: white; 
}
.ess-table > thead > tr > th a { 
    background-color: #0078d2;
    color: white !important;
    text-decoration: none !important;
}

<table class="table ess-table">
    <thead>
        <tr>
            <th style="width:80px;">
                <a href="#" id="approveAll">Approve</a>
            </th>
            <th style="width:80px;">
                <a href="#" id="denyAll">Deny</a>
            </th>
            <th>Shift Date</th>
            <th>Employee</th>
            <th>Schedule</th>
        </tr>
    </thead>
    <tbody>....</tbody>
<table>

Answer 2

查看您的规则：

a.ess-table > thead > tr > th { 
    background-color: #0078d2;
    color: white !important;
    text-decoration: none !important;
}

您没有带有类.ess-table的锚点。您可能正在寻找类似的东西

.ess-table > thead > tr > th a { 
    background-color: #0078d2;
    color: white !important;
    text-decoration: none !important;
}

Answer 3

这个选择器 a.ess-table> thead> tr> th的意思

<a class="ess-table"><thead><tr><th>...

这就是为什么您需要将<a>放在<th>标签下的原因。（上面建议）