如何使用 css 在 nextjs 中设置子 div 的样式答案

【问题标题】：how do I style a child div in nextjs using css如何使用 css 在 nextjs 中设置子 div 的样式
【发布时间】：2022-01-25 11:59:39
【问题描述】：

我正在处理网站的菜单栏。

我正在为我的应用程序使用 nextjs

我想为 a 标签设置样式

但是没有用

我的代码

Javascript

const Nav = () => {
    return (
        <div className={styles.nav}>
            <div className={styles.topNav}>
                <div className="d-flex justify-content-between">
                    <div>
                        <Link href="/">
                            <a>
                                Logo
                            </a>
                        </Link>
                    </div>
                    <div className={styles.navLinks}>
                        
                    </div>
                    <div onClick={openMenu} className={styles.menuHamburger}>Menu</div>
                </div>
            </div>
        </div>
    )
}

CSS

.topNav{
    background-color: blue;
    padding: 1.5rem 1rem;
}

.topNav > div > a{
    color: white;
}

【问题讨论】：

styles.topNav 的实际值是多少？你确定是"topMenu"？另外，您为什么要使用样式表来执行此操作，而不是您已经成功使用的方法？延伸阅读：nextjs.org/docs/basic-features/…

标签： javascript css reactjs next.js

【解决方案1】：

您在.topNav > div > a 中使用了子选择器>，这意味着您只是在设置<a> 的样式，它是<div> 的子元素，<div> 是具有.topNav 类的元素的子元素。你的<a> 只是这里的后代。您可以使用空格来指定任何后代：.topNav > div a

【讨论】：