下划线的 css 代码不起作用，并且 css 代码不适用于 html/

如何解决下划线的 css 代码不起作用，并且 css 代码不适用于 html/

我是 html 和 css 的新手，我只是在 xd adobe 上设计了示例网站。附上它的图像。 html 可以工作，但是当我处理 css 部分时不是 workink，我没有在网站上显示。我在 scss 文件而不是 css 文件中编码。我将不胜感激任何帮助！您可以看到我在 css 文件中写道，徽标应该没有下划线，但仍然无法正常工作

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
body {
  background: #F2F2F2;
  font-family: 'Poppins';
  margin: 0;
}

.navbar {
  background: white;
  padding: 1em;
  .logo2 {
    text-decoration: none;
    font-weight: bold;
    color: black;
    font-size: 10em;
  }
}

.container {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>JustFly</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="navbar">
    <div class="container">
      <a class="logo2" href="#">JustFly</a>
      <img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">

      <nav>
        <img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">

        <ul class="primary-nav">
          <li class="current"> <a href="#">Home</a> </li>
          <li> <a href="#">FAQ</a> </li>
          <li> <a href="#">Pricing</a> </li>
        </ul>

        <ul class="secondary-nav">
          <li> <a href="#">Contact</a> </li>
          <li class="GoPremiumBtn"><a href="#">Buy Now</a> </li>
        </ul>
      </nav>
    </div>
  </div>

  <section class="hero">
    <div class="container">
      <div class="col">
        <h1 class="head">Fly Like Never Before.</h1>
      </div>
      <img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="fighet Plane Image">

    </div>


  </section>
</body>

</html>

在 XD 中设计：

代码图片：

输出：

解决方法

尝试将 a.logo2:link,a:logo2:visited 作为该 CSS 规则的选择器。这应该比浏览器默认的 a:link 和 a:visited 更具体并否决它们。

下划线的 css 代码不起作用，并且 css 代码不适用于 html/

如何解决下划线的 css 代码不起作用，并且 css 代码不适用于 html/

解决方法

相关推荐