伪类不能与类一起使用

Question

我正在尝试做一个简单的布局，但是当我的伪类与类一起使用时，我遇到了问题。 尽管这些类的CSS可以工作，但是任何实例

a.class:pseudo-class{/*styling*/}

被写不起作用。 另外，尽管我没有在下面的代码中使用它，但仅使用伪类

a:pseudo-class{/*styling*/}

正常工作。

我该如何解决这个问题？ 谢谢。

CSS：

ul {
  display: block;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}    

.nav {background-color: #5F5F5F;}

a.nav:link, a.nav:visited {color: #FFFFFF;}

a.nav:hover {background-color: #000000;}

.chosenNav {background-color: #8AC007;}

a.aside1:link, a.aside1:visited {color: #000000;}

.chosenAside, a.aside1:hover {background-color: #DDDDDD;}

HTML：

  <div class = "nav">
    <ul>
      <li><a href = "link1">LINK1</a></li>
      <li class = "chosenNav"><a href = "link2">LINK2</a></li>
    </ul>
  </div>

  <div class = "aside1">
    <h2>JS Tutorial</h2>
      <ul>
        <li class = "chosenAside"><a href = "link3">LINK3</a></li>
        <li><a href = "link4">LINK4</a></li>
      </ul>
  </div>
</pre>

Answer 1

如果要设置所有链接的样式，则应提供一个类和样式，而不是这样。

a.class-name:link, a.class-name:visited {
 color: #FFFFFF;
}

a.class-name:hover {
 background-color: #000000;
}

要么

如果您不希望提供类名，那么只需这样做即可。

a:link, a:visited {
     color: #FFFFFF;
    }

    a:hover {
     background-color: #000000;
    }

Answer 2

您尝试执行的语法略有不同。

<class-name> <tag>:<pseudo> {
<property>: <value>;
}

也许您正在努力实现这一目标？ https://jsfiddle.net/yqatz6Lk/