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

我有以下表格的CSS。我现在在表格标题中添加了一个超链接，但是我为它添加的CSS似乎不适用于！重要的。当我在devtools中查看时，它看起来好像是在为引导文件中设置的基本标记应用CSS。我不能100%确认这一点，因为我使用的更少，而开发工具只是显示它来自我编译的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>

轮班日期
雇员
日程
....

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

查看您的规则：

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

类

.ess表

中没有锚定。你可能在找类似的东西

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

查看您的规则：

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

类

.ess表

中没有锚定。你可能在找类似的东西

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

---

您的

a

位于css的错误一侧。应该是：

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

而不是

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

a{
颜色：#0078d2；
文字装饰：无；
}
.ess表格>THAD>tr>th，
.ess表格>tbody>tr>th，
.ess table>tfoot>tr>th{
背景色：#0078d2；
颜色：白色；
}
.ess table>thead>tr>th a{
背景色：#0078d2；
颜色：白色！重要；
文字装饰：无！重要；
}

轮班日期
雇员
日程
....

您的

a

位于css的错误一侧。应该是：

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

而不是

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

a{
颜色：#0078d2；
文字装饰：无；
}
.ess表格>THAD>tr>th，
.ess表格>tbody>tr>th，
.ess table>tfoot>tr>th{
背景色：#0078d2；
颜色：白色；
}
.ess table>thead>tr>th a{
背景色：#0078d2；
颜色：白色！重要；
文字装饰：无！重要；
}

轮班日期
雇员
日程
....

此选择器a.ess-table>thead>tr>th表示

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

。。。

---

这就是为什么需要将

放在

标记下的原因。（以上建议）

此选择器a.ess-table>thead>tr>th表示

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

。。。

这就是为什么需要将

放在

标记下的原因。（上文建议）