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/

伪类不适用于类

2 个答案: