Question

我正在YouTube上的 DesignCourse 中编写有关 SVG剪辑路径的教程，在我的.scss文件中，我有很多样式，但是第38行之后的样式甚至没有应用当我和他一起检查代码时，我发现他的代码与我的代码相同，而且我不知道为什么这些样式不适用。我尝试切换到隐身模式并切换浏览器，但没有一个帮助（我在Visual Studio Code和浏览器控制台中均未收到任何错误）。

此处是该教程的链接： https://www.youtube.com/watch?v=x9_ULV1vjQE&list=WL&index=42

这是我的.scss文件：

@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');

body, html {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Nunito";
    background: #220954;
}

.wrapper {
    position: relative;
    overflow: hidden;

    nav {
        width: 20%;
        float: right;
        background-color: #5923c6;
        height: calc(100vh - 4em);
        font-size: 1.4em;
        line-height: 1.5em;
        color: white;
        padding: 2em;
        //clip-path: url("#clipPath");

        ul {
            list-style-type: none;
            padding: 0;

            a {
                text-decoration: none;
                display: block;
                padding: 1em 0;
                font-weight: bold;
                color: white;
            }


            p {
                color: red;
            }
        }
    }

    h1 {
        color: white;
        margin: 2em;
        font-size: 5em;
        position: absolute;
        top: 0;
        left: 0;
    }

    button {
        position: absolute;
        top: 0;
        right: 0;
        margin: 2em;
        font-size: 1.4em;
        background: none;
        border: 3px solid purple;
        color: white;
        padding: 1em;
        cursor: pointer;
        outline: none;

        &:hover {
            background: rgba(0, 0, 0, 01);
        }
    }
}

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CLIPPY</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <button id="open">Open Nav</button>
    <div class="wrapper">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem recusandae aperiam est nulla veritatis magnam dolores, totam perspiciatis unde, mollitia vel exercitationem quas reprehenderit qui deserunt? Illum ipsam eveniet exercitationem?</p>
        </nav>
    </div>

    <h1>Bro, wooooooahh</h1>

</body>
</html>

Answer 1

您的问题尚不清楚，但我想您是在谈论您的h1，并且未应用按钮样式。

您的SCSS将这些样式定义为.wrapper样式的子样式，这意味着它们被编译为.wrapper h1和.wrapper button。这种选择器要求将元素定义为HTML中包装div的子元素。

但是在HTML中，这些元素未包含在包装div中，它们是它的兄弟。

您需要将HTML移到wrapper div中，或者将SCSS定义移到.wrapper类之外。

您关注的youtube视频由于错误而具有误导性代码。 7:09处第37行有一个额外的括号。这种额外的支撑使他的将来样式在实际上不是缩进级别时似乎是.wrapper类的成员。

scss问题：某些样式未应用

1 个答案: