WordPress小部件父级及祖父级CSS定制：分类字体颜色修改求助

首先得明确WordPress分类小部件的HTML层级结构，这是精准写CSS的关键——一般它的结构大概是这样的：

<div class="widget widget_categories">
  <ul>
    <!-- 顶级父分类 -->
    <li class="cat-item"><a href="#">顶级父分类1</a>
      <!-- 次级父分类（子分类）的容器 -->
      <ul class="children">
        <li class="cat-item"><a href="#">次级父分类</a></li>
      </ul>
    </li>
    <li class="cat-item"><a href="#">顶级父分类2</a></li>
  </ul>
</div>

你之前的CSS只设置了背景样式，没针对不同层级的链接做颜色区分，而且如果直接用.widget ul a会选中所有层级的链接，所以单独改颜色会被覆盖或者不生效。咱们用层级选择器来精准定位不同级别的分类链接：

把下面的代码加到你的CSS里，替换或者补充你原来的样式：

/* 保留你原来的背景样式 */
.widget ul {
  background: gray;
  padding-top: 1px;
}
.widget ul li {
  background: lightgray;
  margin: 1px;
}
.widget ul a {
  background-color: darkgray;
  padding: 1px;
}

/* 顶级父分类的字体颜色 */
.widget ul > li > a {
  color: #d9534f; /* 这里换成你想要的颜色，比如红色 */
}

/* 次级父分类（子分类）的字体颜色 */
.widget ul li ul > li > a {
  color: #5cb85c; /* 这里换成你想要的另一种颜色，比如绿色 */
}

小技巧： #

如果你的小部件是专门的分类小部件，还可以用更精准的类名缩小范围，避免影响其他侧边栏小部件：

/* 只针对分类小部件的顶级父分类 */
.widget_categories ul > li > a {
  color: #d9534f;
}
/* 只针对分类小部件的次级父分类 */
.widget_categories ul li ul > li > a {
  color: #5cb85c;
}

要是还有更深层级的分类（比如三级分类），依葫芦画瓢就行：.widget ul li ul li ul > li > a，设置对应的颜色。

另外，你可以用浏览器的开发者工具（按F12）选中分类链接，查看它的HTML结构，确认选择器是否匹配，这样能更快排查问题~

内容的提问来源于stack exchange，提问作者Kenneth O'Donnell