如何将WordPress小部件CSS样式应用到页面文本标题？

嗨，这个小问题很好解决，咱们一步步来搞定：

1. 定位目标标题的CSS选择器
   打开浏览器开发者工具（按F12键），找到页面上的「Doporučené Produkty」标题元素。右键选择「检查」，就能看到它对应的HTML标签、类或者ID。举个例子，如果这个标题放在带.recommended-products类的容器里的<h2>标签中，那它的CSS选择器就是.recommended-products h2。

2. 复用已有的下划线样式
   你已经找到了小部件下划线对应的CSS规则，现在只需要把目标标题的选择器整合进去，或者直接复制样式单独写规则：

   方法一：扩展原有规则 #

   找到你提到的那个CSS规则，把目标选择器追加到选择器列表末尾即可，比如：

   textarea:focus, input:focus, h4.tt, h3.tt, .widget_gardengeneralposts h4, .list-cust..., .recommended-products h2 {
       /* 保留原有的蓝色下划线样式，比如： */
       border-bottom: 2px solid #0073aa; /* 替换成实际的蓝色色值 */
       padding-bottom: 4px; /* 如果原规则有此属性记得保留 */
       /* 其他相关样式也一并保留 */
   }
   

   方法二：单独复制样式（更灵活） #

   如果不想修改原有规则，也可以单独为目标标题写一个CSS规则，直接复制原有的下划线样式：

   /* 替换成你找到的目标标题选择器 */
   .recommended-products h2 {
       border-bottom: 2px solid #0073aa;
       padding-bottom: 4px;
       /* 原规则里的其他样式也一并复制过来 */
   }
   

3. 处理样式优先级问题
   如果添加后样式没生效，大概率是优先级冲突。可以给目标选择器增加权重，比如多嵌套一层父容器的类，万不得已时再用!important（尽量少用，避免后续样式冲突）：

   .recommended-products h2 {
       border-bottom: 2px solid #0073aa !important;
       padding-bottom: 4px !important;
   }
   

这样就能让「Doporučené Produkty」标题和小部件的下划线样式完全统一啦！

内容的提问来源于stack exchange，提问作者DrMTR