我对选择器的理解是否正确？

Question

.top-menu {
  margin: 50px auto;
  padding: 0;
  list-style: none;
  width: 610px;
  height: 35px;
  box-shadow: 0 3px 4px #8b8b8b;
  background-color: #dadada;
}

.top-menu li {
  float: left;
  border-right: 1px solid #929292;
}

.top-menu li a:link {
  color: black;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 35px;
  line-height: 35px;
}

.top-menu li a:visited {
  color: black;
}

ul li a:hover {
  background-color: #555;
  color: #fff;
}

<head>
  <meta charset="UTF-8">
  <title>pseudo selecotor</title>
</head>

<body>
  <nav>
    <ul class="top-menu">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
      <li><a href="#">menu6</a></li>
    </ul>
  </nav>
</body>

我运行这个页面，

如果悬停在菜单上，文本颜色为黑色。

但在 css 中，悬停的文本颜色为白色。

如果我更改悬停的选择器

从 ul -> 到 .top-menu

文本颜色为白色。

这是因为我将黑色作为 class 选择器，将白色作为标签选择器吗？

是否因为class是应用标签后应用的？

Answer 1

这是因为类比元素和伪元素具有更高的特异性值。在你的例子中 .top-menu 比元素 ul 具有更高的特异性，因此它的样式是 followed/used。具体参考这个table：

更多关于特异性here。

我对选择器的理解是否正确？

Am I correct in my understanding of selectors?

css

css-selectors

pseudo-class