Question

我在WordPress网站上构建了一个站点地图，显示了页面，帖子，档案，类别和作者的链接，我试图找出如何用css定位括号内容（例如（6））以便我可以制作它比链接和子弹颜色浅。

我想：

子弹是std非链接颜色（在这种情况下是＃000）。我知道该怎样这样做
链接为std链接颜色（在本例中为＃F00）。我知道怎么做
并且链接后面的次要/括号内容是较浅的颜色（在这种情况下为＃999）。我坚持这个

输出html如下所示：

Post
<li><a href="/test/">Test</a> <span>May 20, 2017</span></li>

Archive
<li><a href='/2017/05/'>May 2017</a>&nbsp;(6)</li>

Category
<li><a href="/category/uncategorised/" >Uncategorised</a> (8)</li>

对于帖子，有一个跨越日期的范围，所以我能够用：

来定位该范围

#sitemap li a + span

但是，如何定位没有跨度的存档和类别链接中的括号内容，以便我可以将它们设为＃999？

理想情况下，我可以使用过滤器在存档和类别编号周围添加一个范围，但我不知道执行此操作的代码，如果有css解决方案可用，我希望为简单起见。

感谢您的帮助。

Answer 1

如果我正确理解了您的问题，您可以使用before伪元素解决此问题，以便随心所欲地设置子弹样式。

＆＃13;

ul {
  list-style: none;
}

ul li {
  color: #999;
}

ul li::before {
  content: '';
  background: #000;
  border-radius: 100%;
  display: inline-block;
  height: 5px;
  margin: -1px 10px 0 -15px;
  width: 5px;
  vertical-align: middle;
}

ul li a {
  color: #f00;
}

ul li span {
  color: #00f;
}

＆＃13;

<ul>
  <li><a href="/test/">Test</a> <span>May 20, 2017</span></li>
  <li><a href='/2017/05/'>May 2017</a>&nbsp;(6)</li>
  <li><a href="/category/uncategorised/" >Uncategorised</a> (8)</li>
<ul>

＆＃13;

样式括号内容，跟随LI元素中的A链接

1 个答案: