从子选择器覆盖css样式

Question

如何覆盖此css规则：

的CSS：

.menu ul>li>a{
color: black;
}

我需要将颜色更改为蓝色。 我试过了：

a.selected{
color : blue;
}

＆＃13;

＆＃13;

.menu ul>li>a {
  color: black;
}
a.selected {
  color: blue;
}

＆＃13;

<nav class="menu">
  <ul>
    <li>
      <a class="selected">Test</a>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

但它不起作用。提前谢谢

马立克

Answer 1

将a.selected更改为.menu ul＆gt; li＆gt; a.selected

  .menu ul>li>a{
color: black;
}
   .menu ul>li>a.selected{
color: blue;
  }

 <nav class="menu">
    <ul >
        <li>
            <a class="selected">Test</a>
        </li>
    </ul>
</nav>

Answer 2

ListView

您也可以使用！important来覆盖但通常被认为是不好的做法

Answer 3

使用.menu ul>li>a{ color: black; } a.selected{ color : blue !important; }它会使用您给出的值覆盖它您可以了解更多信息！这里重要What are the implications of using "!important" in CSS?

<nav class="menu">
    <ul >
        <li>
            <a class="selected">Test</a>
        </li>
    </ul>
</nav>

.menu ul>li>a.selected{
  color: blue;
}