Css 如果选择了“链接”，则为其余链接降低不透明度

我有一个链接列表，正如标题所说，我想降低除所选链接之外的所有链接的不透明度。因此，如果选择“全部”，则链接1、2、3应变暗。如果选择了Link1，则links All、Link2、3应变暗

<nav class="primary">
      <ul>
        <li><a href="#" class="selected">All</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
</nav>

这就是我的想法，虽然它不起作用，因为它是不正确的（我想它也会降低所选对象的不透明度）：

---

已更新

只需更改声明

CSS

规则的顺序：

nav.primary ul li a {
    opacity:0.5;
}
nav.primary ul li a.selected {
    color:#000;
    border-bottom: 1px solid #004672;
    opacity:1;
}

我已经更改了所选链接的颜色，还添加了一些

jQuery

，但只是为了让您能够看到它的工作情况。您需要的只是

CSS

位

示例：

小提琴：

您可以使用

rgba

颜色值代替不透明度：

nav.primary ul li,
nav.primary ul li a {
    color: rgba(210, 210, 210, .5);
}

nav.primary ul li a.selected {
    color: rgba(210, 210, 210, 1);
}

---

选择链接后，尝试向ul添加其他类

<nav class="primary">
      <ul class="selectedList">
        <li><a href="#" class="selected">All</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
</nav>

---

对不起，css只能向下工作，不能向上或在同一级别工作。你必须用js来做这件事，或者做一些我认为没什么大不了的事情——谢谢。

nav.primary ul li,
nav.primary ul li a {
    color: rgba(210, 210, 210, .5);
}

nav.primary ul li a.selected {
    color: rgba(210, 210, 210, 1);
}

<nav class="primary">
      <ul class="selectedList">
        <li><a href="#" class="selected">All</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
</nav>

nav.primary ul.selectedList li a {
    opacity:0.5;
}
nav.primary ul.selectedList li a.selected {
    color:#e2e2e2;
    border-bottom: 1px solid #004672;
    opacity: 1;
}