如何为我的 Wordpress 网站的剩余 epsilon 设置主题？答案

【问题标题】：How can I theme the remaining epsilon of my Wordpress site?如何为我的 Wordpress 网站的剩余 epsilon 设置主题？
【发布时间】：2016-01-19 01:25:17
【问题描述】：

我正在开发一个 Wordpress 网站，目前位于 http://dev.cjshayward.com，其儿童主题为二十六岁。目前我唯一的自定义是 style.css，虽然我想编辑的路稍微有点远，例如404 页面包含https://cjshayward.com/missing.html 的有趣部分。我现在最感兴趣的两个变化是为了更好地使用和无聊：未访问页面的蓝色下划线和已访问页面的紫色下划线，并且没有小于默认字体大小的文本。

我的更改已根据需要影响了大多数文本，但是左上角的徽标链接“CJS Hayward”是黑色的，除非您将鼠标悬停在它上面，并且一些内部链接是不同的蓝色阴影（注意与复制位置不同），它们是默认颜色）。我尝试从 Chrome 的调试器中检查有问题的元素，Chrome 将我的覆盖显示为活动的，并且（在 !important 的帮助下）相反的颜色和尺寸显示为非活动的，但这些保留看起来像普通的旧的未调整的二十六。

我的孩子主题 style.css 是：

/*
 Theme Name:   Twenty Sixteen UX Tweaks Child
 Theme URI:    https://cjshayward.com/twenty-sixteen-ux-tweaks-child/
 Description:  Twenty Sixteen UX Tweaks Child Theme
 Author:       CJS Hayward
 Author URI:   https://cjshayward.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      MIT
 License URI:  https://opensource.org/licenses/MIT
 Tags:         ux, usability, light, dark, two-columns, right-sidebar,          responsive-layout, accessibility-ready
 Text Domain:  twenty-sixteen-ux-tweaks-child
*/
a
    {
    text-decoration: underline;
    }
a:alink, a:active, .site-branding .site-title a:active
    {
    color: #800000;
    }
a:link, .site-branding .site-title a:link
    {
    color: #0000ee !important;
    } 
a:vlink, a:visited, .site-branding .site-title a:link
    {
    color: #551a8b !important;
    }    
body, button, .entry-footer, input, select, .site-title, textarea, .widget,
.widget-title, h2.widget, h2.widget-title
    {    
    font-family: Verdana, Arial, sans !important;
    font-size: 20px !important;
    }

如何让顶部的“CJS Hayward”链接和右栏中的小部件 h2 分别按照我在子 style.css 中定义的规则进行着色和调整大小？

【问题讨论】：

标签： css wordpress wordpress-theming

【解决方案1】：

如果我对您的理解正确，您希望所有链接（包括 .site-branding）都是蓝色的，并且所有访问过的链接都是红色的。

如果是这样，您的css 规则必须是：

body, button, .entry-footer, input, select, .site-title, textarea, .widget, .widget-title, h2.widget, h2.widget-title
{    
    font-family: Verdana, Arial, sans !important;
    font-size: 20px !important;
}
a, a:link {
    text-decoration: underline;
    color: blue;
}
a:visited {
    color: red;
}
a:hover {
    //color for cover;
}
a:active {
    color: #800000
}

链接状态必须按此顺序定义，根据w3schools

如果你想为你的标志设计不同的样式，那么你可以使用.site-branding .site-title a

【讨论】：

【解决方案2】：

如果你想设置 logo 和小部件标题的样式，请将其添加到 child 的 style.css

.site-branding .site-title a,
.widget .widget-title {
   background: #0000ee;
}

【讨论】：