更改所选<li>项目的文本颜色

Question

我试图改变＆＃34; Sale＆＃34;的文字颜色。 item，但不是只有CSS的电话号码。我无法编辑HTML代码。

npm i @types/webpack-env -D

黄色和黄色的结果红色

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

仅以黄色背景显示结果

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

Answer 1

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

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

  

定位<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>

  

仅定位<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;
}

Answer 2

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

Answer 3

将color:red;添加到.menu.left li:nth-child(2)并将background:yellow;保持在现在的位置。您尝试更改<a>标记的字体颜色而不是<li>。

Answer 4

这应该有效：

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

Answer 5

要更改<a>的颜色，您必须直接更改<a>的颜色。否则它将无法工作。在这种情况下，您必须更改<a>而不是<li>的颜色。这就是为什么它不起作用。