Question

我继承了一些HTML / CSS代码。我试图了解它以使其发挥作用。目前，我坚持使用一些嵌套的CSS定义。 HTML的原始版本如下所示：

<ul class='nav-items'>
    <li class='child-items'>            
        <a href='#'>Nav Item 1</a><br />
        <a href='#'>Nav Item 2</a><br />
        <a href='#'>Nav Item 3</a>
    </li>
</ul>

与此相关的CSS如下所示：

.nav-items {
    .child-items a {
        color:orange;
        background-color:white;
        font-size:16pt;
    }

    .child-items a:hover {
        color:white;
        background-color:orange;
    }
}

第一个CSS声明（.child-items a）正在运行。我通过将颜色从橙色更改为黑色来证实这一点。但是，悬停定义似乎根本不起作用。嵌套样式定义是否有一些限制？这种方法甚至称为嵌套css定义吗？我尝试阅读这种语法方法但是，我没有任何运气谷歌搜索我认为它可能被称为。

由于

Answer 1

你不能用普通的CSS做到这一点。它应该是这样的：

.nav-items .child-items a {
    color:orange;
    background-color:white;
    font-size:16pt;
}

.nav-items .child-items a:hover {
    color:white;
    background-color:orange;
}

但，如果您确实需要该功能，可以查看SASS。

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

它是一个CSS预处理器 - 意味着你编写了一些SASS代码，它会为你的浏览器编译成可用的CSS。有了它，你可以完全按照你的第一次尝试！

注意：您需要安装Ruby才能使用SASS。

Answer 2

嵌套选择器不是CSS规范的一部分。您继承的代码可能是SASS或LESS。要使您的CSS工作，您必须安装上述扩展之一或只是不需要 CSS：

.nav-items .child-items a {
    color:orange;
    background-color:white;
    font-size:16pt;
}

.nav-items .child-items a:hover {
    color:white;
    background-color:orange;
}

使用嵌套CSS定义

2 个答案: