css - 属性类 css

Question

我给出了以下 css 规则，但它在 chrome 中无法正常工作......我确信这是由于属性的顺序......我猜每个焦点和悬停都必须进入一个悬停和焦点..

.chk{
    .ico {
        background-position: -17px top;
        .stdChk;
    }

    &:hover .ico {
        background-position: -17px -34px;
    }

    &:focus .ico {
        background-position: -17px -51px;
    }

    &.disabled .ico { background-position: -17px -17px; }

    &.checked {
        .ico { background-position: left top; }

        &:hover .ico { background-position: left -34px; }

        &:focus .ico { background-position: left -51px; }

        &.disabled .ico { background-position: left -17px; }
    }
}

但我对这种模式很陌生，所以我不知道如何组织..任何帮助请...

Answer 1

那不是CSS。它是SASS代码，必须在发送到浏览器之前编译为 CSS。

这就是为什么它在 Chrome（以及任何其他浏览器）中不起作用的原因。