更改单个页面的链接颜色

Question

我正在编辑以下网站：http://ju-jitsu.co.uk/

我没有设置网站，但继承了它。

整个网站，基本链接颜色为紫色，鼠标悬停时为红色。

这很好。

然而，我们想改变页面上的链接颜色： http://ju-jitsu.co.uk/upcoming-events/

我们想将其更改为黑色文本，然后当鼠标悬停时变为红色。

我的第一个想法是通过 css 来做到这一点： .page-id-5983 a { color: black; }

然而这并没有奏效。我已经尝试将“黑色”更改为“#000000”，并尝试在主主题和子主题中插入 Style.CSS……所有这些都没有任何乐趣。

所以现在我尝试了 PHP 路线。我已经成功克隆了默认页面模板，并插入了修改后的模板页面名称。这已被上传并被接受为属性侧菜单的所有页面的有效模板文件。

我也可以成功进入编辑器，选择要编辑的页面模板。

我的问题是：覆盖默认链接颜色需要什么代码并插入到哪里？

如果PHP不是路线，我应该追求CSS，关于代码的任何想法以及应该插入的位置？

非常感谢

Answer 1

将此添加到 style.css 文件中

#upcoming_event:hover {
color: #ec0000 !important; /** or whatever hex color code you want **/
}

编辑超链接示例：

<a href="/upcoming-events">Upcoming Event</a>

收件人（向超链接添加 id）：

<a id="upcoming_event" href="/upcoming-events">Upcoming Event</a>

1) [!important] 会覆盖原来的 css 设置

2) 使用 id 代替 class 将防止覆盖同一类下的其他人，因为 id 是唯一的。

Answer 2

将此添加到您的 CSS 文件中

table a{
color: #000000;
}

或者

在表格中添加一个类，例如“事件”，然后调整你的 CSS 文件：

.events a{
color: #000000;
}

Answer 3

当前样式包含.entry a。这与您建议的选择器.page-id-5983 a 具有相同的“权重”，因为两者都包含一个类名和一个元素名。这意味着无论哪个最后来的都会推翻另一个。

因此，最明显的解决方案是：制作一个更具体的选择器，例如：

.page-id-5983 .entry a {
}

您可能需要添加其他选择器来覆盖特定种类的操作链接。毕竟，紫色应用于许多选择器。在 CSS 中，我发现：

a, .entry a, .related-title, .carousel-layout2 .carousel-item-title, a .pagelink, .page-numbers {
}

因此，您可能需要通过将.page-id-5983 添加到您要覆盖的每个选择器来进行更改。

.page-id-5983 a, .page-id-5983 .entry a, 
.page-id-5983 .related-title, 
.page-id-5983 .carousel-layout2 .carousel-item-title, 
.page-id-5983 a .pagelink, .page-id-5983 .page-numbers {
}

PS：像 SCSS 这样的 CSS 预处理器肯定可以帮到你！

Answer 4

首先尝试为该表指定一个类（因为我认为您只需要修改该特定表内的链接），例如.events-table

然后

table.events-table a {
color: #000000;
}

table.events-table a:hover {
color: red;
}

为了更加确定将它们放在样式表的末尾