html - 使用一个选择器应用多个 CSS 规则

Question

例如，如果我有很多 CSS 样式，它们只需要应用于 div #container 中的对象。是否可以使用另一种类型的选择器而不是在所有前面写#container？所以我不必为 div #container 中的每个对象编写它？

HTML

<div id="container">
    <div class="letter">a</div>
    <div class="letter">b</div>
    <div class="number">1</div>
    <div class="number">2</div>
</div>
<div class="letter">c</div>
<div class="number">3</div>

CSS

.letter {
    font-size:25px;
    color:green;
}
.number {
    font-size:30px;
    color:red;
}

我想为 #container 中的每个 .letter 和 .number 编写一个规则。

当然，我只是在这里重现我的问题，但是否有可能更改 .letter 和 .number 的规则，使其仅适用于 #container 而不必更改它 2 次(在此复制中为 2 次)？ (在我的问题中大约有 30 个对象)。

---

我在这些规则之前尝试了 #container 选择器，但没有成功。它打破了样式。

我的 CSS 尝试:

#container {
    .letter {
        font-size:25px;
        color:green;
    }
    .number {
        font-size:30px;
        color:red;
    }
}

有没有人知道解决方案，或者我是否必须在像这样的每个规则前手动应用 #container(我想避免，因为它需要大量工作!):

#container .letter {
    font-size:25px;
    color:green;
}

#container .number {
    font-size:30px;
    color:red;
}

Answer 1

是的，CSS 非常愚蠢和简单，你别无选择，只能在每个类前面加上#container。

但是

开发人员很懒，创建了一种预处理语言来添加一些疯狂的功能。目前，有两种选择:SASS和 LESS

但是使用这些技术你可以像这样写你的样式:

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

  li { display: inline-block; }

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

然后自动生成这样的 CSS 文件:

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

nav li {
  display: inline-block;
}

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

这称为“嵌套”，只是您会喜欢的众多内容之一。

在 SASS 和 LESS 之间使用哪个？

它们是相似的，我的建议是我们现有的框架，看看哪个可用。例如 bootstrap 使用 LESS，Foundation 使用 SASS ...但两者非常相似。

我每天都使用它们，并且对 SASS 有一些偏好，但这是我个人的看法。