提问人:Elerium-115 提问时间:6/27/2022 最后编辑:Elerium-115 更新时间:6/28/2022 访问量:343
如何使用CSS更改表格中链接的颜色,但无法访问“class”参数/ HTML文件?
How to change color of links in a table using CSS but without access to "class" parameter / HTML file?
问:
我正在尝试对一个非常旧的网站进行彻底改造,我无法访问该托管服务器。不仅它的 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>
答:
子选择器仅适用于直系后代。因此,一旦你到达了你的锚点,你就应用了悬停、活动、焦点状态。
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-child
b
font
:active
用于按住链接。
通过键盘或单击链接访问时。:focus
评论
:link
:hover
:active
:visited
:link
a
b
font
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; }
:link
属于锚标记的状态,而不是字体。
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; }
评论