未應用 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。 否則它不會工作。