Question

我在父母中加上CSS div，如下所示：

<div id="homepage">
     <div class="a"></div>
     <div class="b"></div>
     <div class="c"></div>
</div>

我目前正在将这个放在我的CSS中：

#homepage .a {
     background-color: #ff0000;
}

#homepage .b {
     background-color: #0000ff;
}

#homepage .c {
     background-color: #00ff00;
}

我的问题是在我的CSS中有更好的方式来引用它，而不是我目前正在做的事情。我试过了，但它失败了：

#homepage {
     .a {
          background-color: #ff0000;
     }
     .b {
          background-color: #0000ff;
     }
     .c {
          background-color: #00ff00;
     }
}

Answer 1

在纯CSS中没有办法做这些事情。您必须使用CSS预处理器，例如Sass或Less。

Sass中嵌套选择器的示例：

MATCH (m) WHERE NOT (n {id: 1})-->(m)
RETURN n,m;

它生成以下CSS：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

如何引用CSS儿童

1 个答案: