css - 使用 CSS 将样式/格式从一个 WordPress 小部件复制到另一个小部件

Question

我在 my Wordpress blog 中插入了一个前置标题小部件.我希望它具有与页脚小部件相同的格式。

但是，我遇到了两个问题:

1. 顶部小部件的标题是 h3，而底部的标题是 h4。我尝试用 h4 样式手动覆盖 h3 样式

   .pre-header-widget .h3 {
     font-size: 1.125em;`
     line-height: 1.34;`
   }
   

没有结果。如何将顶部小部件中的 h3 标题更改为与页脚小部件中的标题相同？

1. (感谢 enigma，2 现在已修复。)要么我不知道如何使用伪类(可能)，要么伪类在前置标题小部件中不起作用，因为我可以'让页眉前小部件中的链接以与页脚中相同的方式运行。

2. 这就是我现在针对前置标题小部件所做的一切:

   .pre-header-widget {
     margin-left: auto;
     margin-right: auto;
     display: block;
     width: 100%;
     margin-top: 2.5em;
     margin-bottom: 0.5em;
     text-transform: uppercase;
     text-align: center;
   }
   
   .pre-header-widget ul {
     list-style-image: none;
     list-style-position: outside;
     list-style-type: none;
     font-size: .813em;
     font-weight: 400;
     line-height: 1.85;
     letter-spacing: .08em;
     word-wrap: break-word;
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
     overflow: hidden;
   }
   
   .pre-header-widget a, .pre-header-widget a:link, .pre-header-widget a:visited {
     color: #8c8c8c;
   }
   
   .pre-header-widget a:active, .pre-header-widget a:focus, .pre-header-widget a:hover {
     color: #white;
     font-family: raleway, sans-serif;
     font-weight: normal;
     -webkit-transition: opacity 0.2s ease;
     opacity: 0.6;
     transition: opacity 0.2s ease;
     transition-delay: 0s;
     transition-property: all;
     transition-timing-function: ease;
   }
   

Answer 1

下面的 css 应该做你想做的。我建议在浏览器开发人员工具中使用 FireBug 或其他一些工具来完成此类工作。

.pre-header-widget h3 {
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.34;
}


.pre-header-widget a, .pre-header-widget a:link, .pre-header-widget a:visited {
    color: #8c8c8c;
}

.pre-header-widget a:active, .pre-header-widget a:focus, .pre-header-widget a:hover {
    color: #ededed;
}