伪类不适用于类

Question

我正在尝试做一个简单的布局，但是当我的伪 classes 与 classes 一起使用时我遇到了问题。尽管 classes 的 CSS 有效，但

的任何实例

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

写的不行。另外，虽然我没有在下面的代码中使用它，但它本身使用了一个伪class

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 而不是像这样的样式..

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

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

或

如果您不想提供 class 名称，那么只需这样做..

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

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

Answer 2

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

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

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

伪类不适用于类

Pseudo-classes not working with classes

html

css

pseudo-class

伪 类 不适用于 类

Pseudo-classes not working with classes

html

css

pseudo-class

伪类不适用于类