为什么 CSS 属性和媒体查询不适用于某些元素

Question

我正在尝试使用 React 构建一个作品集页面并使用 SCSS 进行样式设置。 我对这些库并不是完全陌生，因为我已经使用它们有一段时间了。最近，我遇到了一些问题，某些元素的样式没有反映在浏览器上。

我有一个带有嵌套导航元素的标题元素。在我尝试更改 h4 和“li”元素的“color”属性之前，样式工作得很好。什么都没起作用。我的代码很好，因为 SCSS 页面上没有错误。我也尝试过使用不同的浏览器并清除了我的缓存，但仍然没有任何变化。这让我非常沮丧，因为这无法让我的工作取得进展。

//这是反应代码

export default function Header() {
    return (
        <>
        <header>
            <nav>
                <h4 className="color">
                    <NavLink to='/'>Chidera</NavLink>
                </h4>

                <ul class="nav-links">
                    <li><NavLink to='/'> Home</NavLink></li>
                    <li><NavLink to='portfolio'> Portfolio</NavLink></li>
                    
                </ul>

                <div class="burger">
                    <div class="line1"></div>
                    <div class="line2"></div>
                    <div class="line3"></div>
                </div>
            </nav>
        </header>
        <Outlet/>
        </>
    )
}

//SCSS代码

 header {
        width: 100%;
        height: 10vh;
        display: grid;
        place-items: center;

        nav {
            width: 80%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            h4 {
                font-size: 1.2rem;
                color: gold;
                font-style: italic;
                background-color: #48ff00;
            }

            ul {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 40%;
                color: white;
                padding: 0 1rem;

                li {
                    color: white;
                    background-color: #1906cc;
                }
            }

            .burger {
                cursor: pointer;
                display: none;

                div {
                    width: 25px;
                    height: 3px;
                    background-color: rgb(221, 168, 90);
                    margin: 5px;
                    transition: all 0.3s ease;
                }
            }
        }
        
    }

我还注意到媒体查询也不适用于某些元素。同样，这不是我的代码的问题，因为 SCSS 上没有与此相关的错误消息。例如，我希望当设备低于 800 像素时显示我的汉堡元素。设置汉堡显示：块；绝对没有做任何事情，但我能够更改主要元素的背景颜色。我不知道这是否是 SCSS 的问题，因为即使我按照它们在反应页面上显示的方式嵌套元素，仍然没有任何效果。

@media screen and (max-width: 768px) {
    main {
        background-color: pink; //works
    }
    .burger {
        display: block; //does nothing
    }
}

请注意开发人员的工具如何识别第二个图像中的颜色属性，但页面本身没有任何反映。另请参阅主背景颜色如何变为粉红色但汉堡不显示。

我希望这不是 SCSS 的问题，因为我懒得回到纯 CSS

请帮忙。

谢谢你。

Answer 1

NavLink 和来自“react-router-dom”的链接 有其默认属性。 h4 和 li 的 CSS 属性不会覆盖 NavLink 和 Link 属性。您需要直接重写 NavLink 和 Link 的属性。

第一步，从h4和li中取出颜色

 <h4 className="color">
     <NavLink to="/" className="colorGold">Chidera</NavLink>
 </h4>

CSS

.color {
  color: gold;
}

li部分财产

<ul className="nav-links">
      <li>
           <NavLink to="/" className="listColor">Home</NavLink>
      </li>
      <li>
           <NavLink to="/portfolio" className="listColor">Portfolio</NavLink>
      </li>
</ul>

CSS

.listColor {
  color: white;
}