&；：不在SCSS工作的第一类li

我试图使

ul

类

breadcrumbs

中的第一个

li

元素具有红色背景，但它不起作用。我肯定我错过了一些简单的东西，但是什么呢

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

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

---

您将伪选择器放置在错误的位置

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

        }

---

&

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

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

但是如果我正确理解了你的问题，你只想在第一个

li

中设置样式，而不是在第一个

ul

中设置所有

li

。试试这个

.breadcrumbs {
    ...

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

---

这将导致.breadcrumbs:first of type li，它将选择第一个type.breadcrumbs元素中的所有li元素。也许？：li{&：类型{…}的第一个，这就是为什么您需要查看编译后的结果，以确保它包含您期望的结果。