如何使用CSS更改表格中链接的颜色,但无法访问“class”参数/ HTML文件?

How to change color of links in a table using CSS but without access to "class" parameter / HTML file?

提问人:Elerium-115 提问时间:6/27/2022 最后编辑:Elerium-115 更新时间:6/28/2022 访问量:343

问:

我正在尝试对一个非常旧的网站进行彻底改造,我无法访问该托管服务器。不仅它的 HTML 是 1990 年代的,而且它的代码有许多明显的错误,当需要解决方法时,我通常最终会搞砸网站的其他部分

现在,我需要调整表格的内容。这张桌子在某种程度上也被搞砸了。那么有没有办法用CSS来给它所持有的所有链接着色呢?我想应用于这些链接参数

a:link
a:hover
a:active
a:visited
a:visited:hover

到目前为止,我只将该表的唯一非链接文本更改为

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(7) > b:nth-child(1) > font:nth-child(1)
{
color: #ffffff !important;
}

并将其唯一的两个链接[又名其其余的书面和可见内容]更改为

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1) > b:nth-child(1) > font:nth-child(1)
{
color: #ff0000 !important;
}

但是,当我尝试用类似的东西扩展这两行代码时

> a:hover

或将他们的结局重新设计为

font:nth-child(1)a:hover

它们被恢复为我试图摆脱的默认颜色。当我正在编写一个 CSS 主题以与 Firefox 中的 Stylish 附加组件一起使用时,我无法触及代码,例如使用 >>class<< 方法 [因为它没有在原始 HTML 中使用]。那么,有没有办法将>>悬停<<[和其他变体]添加到此类链接中?

这张表位于一个小的子页面上 - 首要任务是使主页美观,我为各种元素使用各种参数,从>>body<<部分开始 - 所以我认为其中一些可能会被转移到这个子页面。但就目前而言,这个子页面是唯一一个带有表格的页面[如果这在某种程度上有助于解决方法]

[很抱歉,如果我使用了错误的命名法,但我不是程序员 - 只是一个小型代码调整器]

这是原始的 HTML 代码:

<table cellspacing="7" cellpadding="0" border="0" bgcolor="#000000">
<tbody><tr>
<td></td>
<td></td>
<td><b><a href="https://[-FIRST-LINK-]"><font color="#999999">-TEXT-OF-FIRST-LINK-</font></a></b>
</td>
<td></td>
<td>
<a href="mailto:[-SECOND-LINK-]">
<b><font color="#999999">-TEXT-OF-SECOND-LINK-</font></b></a></td>
<td></td>
<td><b><font color="#999999"-TEXT-OF-THE-ONLY-NONLINK-</font></b>
</td>
</tr>
</tbody></table>
CSS HTML 表格 颜色 超链接 时尚

评论


答:

0赞 Tim Vermaelen 6/27/2022 #1

子选择器仅适用于直系后代。因此,一旦你到达了你的锚点,你就应用了悬停、活动、焦点状态。

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):hover > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):active > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):focus > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1):hover > b:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1):active > b:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1):focus > b:nth-child(1) > font:nth-child(1) {
    color: #00ff00;
}

不确定这些 s 和选择器是否是必需的。
由于我不知道你的HTML代码,我看不出要调整这个选择器。
:nth-childbfont

:active用于按住链接。
通过键盘或单击链接访问时。
:focus

评论

0赞 Elerium-115 6/28/2022
这几乎奏效了。因为我不影响第一个链接的颜色[即当它处于非活动状态时]。我使用了带有 和 的变体,因为其他我不需要 - 但也尝试添加 .至于你的问题:嵌套选择器的顺序在该 HTML 中有所不同。我尝试过相应地应用之前和 ,但它没有用 - 即经验结果表明,即使是需要。所以这很奇怪 - 因为这怎么能适用于第二个 [非活动] 链接,而不适用于第一个链接?[我通过添加原始 HMTL 代码来编辑我的帖子]:link:hover:active:visited:linkabfont
0赞 Elerium-115 6/28/2022
目前不起作用 - 但我可以通过使用 . 更改字体的整体颜色来使用解决方法。但我宁愿不转述这一点,因为它可能不太能证明未来body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):link> font:nth-child(1):link { color: #ff0000; }body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1) { color: #ff0000; }
0赞 Tim Vermaelen 6/28/2022
:link属于锚标记的状态,而不是字体。
0赞 Elerium-115 6/28/2022
所以。。。因此,我被迫使用我的解决方法?或者将上面注释中不起作用的 CSS 调整为正确的方法?但是如果是,那为什么我不需要也使用呢?body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1) { color: #ff0000; }body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1)> b:nth-child(1) > font:nth-child(1) { color: #ff0000; }