html - 使用嵌套的 CSS 定义

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。