&:first-of-type li 在 SCSS 中不起作用 [关闭]答案

【问题标题】：&:first-of-type li not working in SCSS [closed]&:first-of-type li 在 SCSS 中不起作用 [关闭]
【发布时间】：2016-05-01 17:43:02
【问题描述】：

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

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

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

【问题讨论】：

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

标签： css sass pseudo-class

【解决方案1】：

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

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

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

.breadcrumbs {
    ...

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

【讨论】：

【解决方案2】：

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

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

        }

【讨论】：