使用 :nth-child/:nth-of-type 选择器时出现 sass 错误答案

【问题标题】：sass error when using :nth-child/:nth-of-type selectors使用 :nth-child/:nth-of-type 选择器时出现 sass 错误
【发布时间】：2015-12-20 01:41:48
【问题描述】：

我在当前项目中使用 sass，但不知道为什么它无法编译：

.section {
    &:first-of-type {
        background: url("../img/misc/.jpg") center center no-repeat;
        background-size: cover;
        &--text {
            &--title {
                /*THIS WON'T COMPILE*/
            }
            &--subtitle {
                /*THIS WON'T COMPILE*/
            }
            &--subscribe {
                &--input {
                    /*THIS WON'T COMPILE*/
                }
                &--button {
                    /*THIS WON'T COMPILE*/
                }
            }
        }
    }
    &:nth-of-type(2) {
        &--text {
            &--title {
                /*THIS WON'T COMPILE*/
            }
            &--paragraph {
                /*THIS WON'T COMPILE*/
            }
       }
   }
   }

我收到此错误： “&--text”的父选择器无效：“Home stylesheet .section:nth-of-type(2)”

这是我的html：

<section class="section"> <!-- Cover section -->
            <div class="section--text">
                <h1 class="section--text--title">
                    Main title
                </h1>
                <p class="section--text--subtitle">
                    Some text
                </p>
                <div class="section--text--subscribe">
                    <input class="section--text--subscribe--input" type="email" placeholder="Your email">
                    <button class="section--text--subscribe--button">button</button>
                </div>
            </div>
        </section>
        <section class="section"> <!-- Problem section -->
            <img src="img/ipad.jpg" alt="App screenshot">
            <div class="section--text">
                <h2 class="section--text--title">
                     Title
                </h2>
                <p class="section--text--paragraph">
                    Some text
                </p>
            </div>
         </section>

我不能使用嵌套将 css 规则应用于伪选择器的子代吗？我在这里错过了什么？

非常感谢！

【问题讨论】：

它会编译成类似：.section:first-of-type--text，而我假设你想要类似.section:first-of-type .section--text？
是的，这就是我的目标！所以我将我的 sass 更改为：.section:first-of-type { .section--text { // some css &--title { //some css } } }（我缩短了代码以便将其放入评论部分，但希望你明白我的意思？）但它仍然无法正常工作。我不明白。它正在编译为：.section:first-of-type .section--text {//some css}.section:first-of-type .section--text--title {//some css} 等。

标签： css sass css-selectors

【解决方案1】：

您误解了使用 & 嵌套选择器。您的第一个嵌套选择器将编译为（如果可以的话）.section:first-of-type --text。要使用您的子类，您需要包含完整的类名（包括 . 选择器）。这应该可以正常工作：

.section {
    &:first-of-type {
        background: url("../img/misc/.jpg") center center no-repeat;
        background-size: cover;
        &.section--text {
            &.section--text--title {
                /*THIS WON'T COMPILE*/
            }
            &.section--text--subtitle {
                /*THIS WON'T COMPILE*/
            }
            &.section--text--subscribe {
                &.section--text--subscribe--input {
                    /*THIS WON'T COMPILE*/
                }
                &.section--text--subscribe--button {
                    /*THIS WON'T COMPILE*/
                }
            }
        }
    }
    &:nth-of-type(2) {
        &.section--text {
            &.section--text--title {
                /*THIS WON'T COMPILE*/
            }
            &.section--text--paragraph {
                /*THIS WON'T COMPILE*/
            }
       }
   }

}

“&”的作用类似于 CSS 中的空格。更多信息：

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

【讨论】：

试过了，它确实可以编译，但仍然看不到我的css反映在浏览器上。我在上面评论了我所做的最后更改。是的，我对嵌套的东西还很陌生，有时我会感到困惑:)
已修复它，使其可以在浏览器中运行，我的错误（错字）您期望会发生什么？上面评论中的编译代码看起来不错
我的意思是，你希望你的编译代码是什么？