时间戳

首页 > 解决方案 > 样式导航栏，CSS代码在使用类时不起作用

html - 样式导航栏，CSS代码在使用类时不起作用

问题描述

我有这个非常简单的代码。当我尝试使用似乎可行的关键字“nav”设置导航栏的样式时，我在 CSS 代码中创建了一个导航栏，但如果我创建一个类假设 class="nav-bar" 并尝试使用 .nav 访问它-bar 在 CSS 代码中并从那里对其进行格式化，似乎什么都没有发生。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title></title>
  </head>
  <body>
    <nav class="nav-bar">
      <img src="tesla_logo_PNG16.png" alt="logo" class="logo">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Log out</a></li>
      </ul>
    </nav>
  </body>
</html>

这是不起作用的CSS

.nav-bar {
  width: 100%;
  height: 10%;
  color: red;
}

这是有效的CSS

nav {
  width: 100%;
  height: 10%;
  color: red;
}

标签： htmlcss

解决方案

.nav-bar {
  width: 100%;
  height: 10%;
  background-color : red;
}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title></title>
  </head>
  <body>
    <nav class="nav-bar">
      <img src="tesla_logo_PNG16.png" alt="logo" class="logo">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Log out</a></li>
      </ul>
    </nav>
  </body>
</html>

颜色仅适用于文本

推荐阅读