css - 更改所选 项的文本颜色

Question

我正在尝试更改“促销”元素的文本颜色，而不是仅使用 CSS 的电话号码。我无法编辑 HTML 代码。

.menu.left a:first-child {
    background: yellow;
    color: red;
}

结果为黄色和红色

---

.menu.left li:nth-child(2)`
    background: yellow;
    color: red;
}

只有黄色背景的结果

---

你知道如何解决这个问题吗？

Answer 1

您可以定位 <li>或 <a> 在这种情况下，我瞄准了第二个 li，然后是 a，所以字体变为红色。如果您只针对 li，字体不会变为红色。

希望这就是您要找的。如果需要，很乐意解释或提供更好的解决方案。

Example targeting the <a>

.menu.left li:nth-child(2) a{
  background-color: yellow;
  color: red;
}

<ul class="menu left">
  <li>
    <a href="#">1231233123</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
</ul>

Example only targeting the <li>

.menu.left li:nth-child(2){
  background-color: yellow;
  color: red;
}

<ul class="menu left">
  <li>
    <a href="#">1231233123</a>
  </li>
  <li>
    <a href="#">Sale</a>
  </li>
</ul>

OP 评论

“谢谢你，Gerardo，你的解决方案非常有效。虽然我使用此链接的移动版本遇到了麻烦。也许你可以看看？codepen.io/anon/pen/xYJKRW”

在您的评论中，您添加了一个codepen，您也有同样的错误。您正在尝试定位 <li>当您必须定位 <a> 时试试这个:

[data-mobile-dropdown-rel="sale"] a {
  color: red;
}