为单个页面更改 link 颜色

Question

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

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

整个网站，基本link颜色是紫色，鼠标悬停时是红色。

这很好。

但是，我们想要更改页面上的颜色 links： http://ju-jitsu.co.uk/upcoming-events/

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

我的第一个想法是 css： .page-id-5983 a { color: black; }

然而这并没有奏效。我试过将 "black" 更改为“#000000”，并尝试插入主题和子项中的 Style.CSS 中......都没有任何乐趣。

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

我也可以成功进入编辑器，select 页面模板进行编辑。

我的问题是：覆盖默认 link 颜色需要什么代码和插入位置？

如果 PHP 不是路线，我应该追求 CSS，关于代码和应该插入哪里的任何想法？

非常感谢

Answer 1

将此添加到您的 CSS 文件

table a{
color: #000000;
}

或

添加一个class到table，例如"events"，然后调整你的CSS文件：

.events a{
color: #000000;
}

Answer 2

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

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

.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 3

首先尝试给那个 table 一个 class（因为我认为你只需要修改那个特定 table 中的链接），例如 .events-table

然后

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

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

为了确保将它们放在样式表的末尾

Answer 4

将此添加到 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 将防止覆盖相同 class 下的其他人，因为 id 是唯一的。

为单个页面更改 link 颜色

Changing link colours for a single page

css

php

templates

colors

hyperlink