我有一个html模板：
<body>
<header>
<nav>
<div class="logo">
<span class="logo-text"
>LOGO<span class="logo-hard">LOGO</span></span
>
</div>
<ul class="menu">
<li><a href="#about">about</a></li>
<li><a href="#team">team</a></li>
<li><a href="#products">products</a></li>
</ul>
</nav>
</header>
<section class="hero-section">
<div class="hero-left">
<img src="./assets/img/main-picture.png" alt="Hero Image" />
</div>
randomowy text
<div class="hero-right">
<img src="./assets/img/main-picture.png" alt="Hero Image" />
</section>
<section class="what-makes-us-different">What Makes Us Different</section>
<section class="ingredients">Ingredients</section>
<section class="dogs-image">Dogs Image</section>
<section class="products-section">Products Section</section>
</body>
和CSS：
:root {
--primary-red: #ad4844;
--primary-grey: #f6f6f6;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
position: relative;
}
nav {
background-color: #fff;
padding: 1em 2em;
height: 5rem;
margin-bottom: 5rem;
position: fixed; /* Przyklejanie nawigacji do góry ekranu */
top: 0;
left: 0;
width: 100%;
z-index: 1000; /* Zapewnia, że nawigacja będzie nad innymi elementami */
display: flex;
justify-content: space-between; /* Rozdziela logo i menu */
align-items: center; /* Wyrównuje w pionie */
border-bottom: 2px solid #ccc; /* Dolny border */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Cień pod dolnym borderem */
}
nav .logo {
font-size: 1.5em;
font-weight: bold;
}
nav .logo-text {
color: #000; /* Czarny kolor dla "Arthro" */
}
nav .logo-hard {
color: var(--primary-red); /* Czerwony kolor dla części "hard" */
}
/* Menu */
nav .menu {
display: flex;
gap: 1.5em;
margin: 0 auto; /* Wyśrodkowanie menu */
}
nav .menu li {
display: inline;
}
nav .menu li a {
color: #000; /* Czarny kolor dla tekstu w menu */
text-decoration: none;
font-weight: bold;
}
nav .menu li a:hover {
color: #555; /* Kolor po najechaniu na link */
}
// products section
.hero-section {
background-color: black;
}
//
.what-makes-us-different {
background-color: pink;
}
/* Ingredients */
.ingredients {
background-color: pink;
}
/* Dogs Image */
.dogs-image {
background-color: green;
}
/* Products Section */
.products-section {
background-color: purple;
}
结果是：
什么让我们与众不同，英雄部分没有背景颜色，但接下来的部分有背景颜色。为什么 css 类不适用于所有部分？为什么有些类被正确应用而有些类被忽略？ 我尝试使用 !important，但没有帮助。样式表链接正确...
这是工作示例： https://codepen.io/pjotrusss/pen/xxvmVrY
举个例子，为什么： 是什么让我们与众不同 文字没有黄色背景？
这里的问题是“//”在 CSS 中不是有效的注释引入符。 两个坏部分前面都有“//”标记。 将它们替换为 /* 注释 */ 并且您的代码可以正常工作。