没有应用css样式？

Question

我想设计标题但我的样式不起作用我的样式没有应用于这个类，这是我的代码。

.nav-link {
color: inherit;
font-weight: var(--fw-bold);
font-size: var(--fs-h1);
}


.logo{
 max-width: 100px;
}

header{
display: flex;
justify-content: space-between;
padding: 1em;
}

.nav{
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;

transform: translateX(0%);
transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav-list{
 list-style: none;
 display: flex;
 height: 100%;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
 margin: 0;
 padding: 0;
 }

.nav-link {
 color: inherit;
 font-weight: var(--fw-bold);
 font-size: var(--fs-h1);
 }

<header>
  <div class="logo">
    <img src="image/logo-naam.png" alt="">
  </div>

  <button class="nav-toggle" aria-label="Toggle navigation">
    <span class="hamburger"></span>
  </button>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item"><a class="nav-link" href="#home"></a>Home</li>
        <li class="nav-item"><a class="nav-link" href="#services"></a>My services</li>
        <li class="nav-item"><a class="nav-link" href="#about"></a>About me</li>
        <li class="nav-item"><a class="nav-link" href="#work"></a>My work</li>
      </ul>
    </nav>
</header>

它确实应用了 H1 的填充但不应用样式？？？它可能被其他东西覆盖吗？我不确定它是如何发生的，任何形式的帮助都会不胜感激

Answer 1

:root {
  --clr-dark: #000;
  --clr-light: #ddd;
  --fw-bold: bold;
  --fs-h1: 40px;
}
/* header */

.logo{
 max-width: 100px;
}

header{
display: flex;
justify-content: space-between;
padding: 1em;
}

.nav{
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;

transform: translateX(0%);
transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}

.nav-list{
 list-style: none;
 display: flex;
 height: 100%;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
 margin: 0;
 padding: 0;
 }

.nav-link {
 color: inherit;
 font-weight: var(--fw-bold);
 font-size: var(--fs-h1);
 }

<header>
  <div class="logo">
    <img src="image/logo-naam.png" alt="">
  </div>

  <button class="nav-toggle" aria-label="Toggle navigation">
    <span class="hamburger"></span>
  </button>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item"><a class="nav-link" href="#home"></a>Home</li>
        <li class="nav-item"><a class="nav-link" href="#services"></a>My services</li>
        <li class="nav-item"><a class="nav-link" href="#about"></a>About me</li>
        <li class="nav-item"><a class="nav-link" href="#work"></a>My work</li>
      </ul>
    </nav>
</header>

您需要先声明 root var，然后才能使用变量 css。否则将无法正常工作。