&:first-of-type li 不支持 SCSS

Question

我试图让 ul 中的第一个 li 元素与 class breadcrumbs 具有红色背景，但它不起作用。我确定我遗漏了一些简单的东西，但是什么？

.breadcrumbs {
            margin-left:-30px;
            p {
                display:inline;
            }
            li {
                display:inline;
                &::before {
                    content:'>> ';
                }

            }   
            &:first-of-type li {
                background:$red;                                
            }                   
        }

Answer 1

你的伪选择器放错地方了。

.breadcrumbs {
            margin-left:-30px;
            p {
                display:inline;
            }
            li {
                display:inline;
                &::before {
                    content:'>> ';
                }
               &:first-of-type {
                  background:$red;                                
               }
            }   

        }

Answer 2

& 返回到父选择器。您的规则将解析为：

.breadcrumbs:first-of-type li {
    background: red
}

但是如果我对你的问题的理解正确，你只想设置第一个 li 的样式，而不是第一个 ul 中的所有 li。试试这个

.breadcrumbs {
    ...

    li:first-of-type {
        background: red;
    }
}