html - 添加更多 CSS 样式时的样式问题

Question

我的导航栏在这里遇到了这个问题。我正在添加样式导航链接和通知我的字体变大并开始使用活动的 btn 样式。

<li class="nav-item">
          <a class="nav-link, notification" [routerLinkActive]="['active']" [routerLink]="
          ['/company/conversation']">Communication <span class="badge-com">3</span> </a>
</li>

这就是我添加到样式中的内容

.notification {
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
}

.notification:hover {
  background: red;
}

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}

有什么方法可以解决这个问题？谢谢！！！

标签： htmlcss

Answer 1

.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
  font-size: 10px; /* added font-size */
}

在代码中它的批处理 com 和在 CSS 中它是批处理。我想知道它是如何工作的。