html - 表头中超链接的 CSS 不适用？

Question

我有以下用于表格的 CSS。我现在在表格标题中添加了一个超链接，但我为它添加的 CSS 似乎并不适用，即使使用 !important 也是如此。当我在 Dev Tools 中查看时，它看起来好像正在将 CSS 应用于 Bootstrap 文件中设置的基本标记。我不能 100% 确认这一点，因为我使用的是 LESS，而开发工具只显示它来 self 编译的 site.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>

我是否需要制作一个特定的类来直接应用于 header 中的标记？

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>