html - 伪类不适用于类

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

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

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

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