Html 使用类cascadingly或显式地将CSS应用于div内的所有元素？

好的，我刚刚遇到了这个：

它将css应用于具有如下类的div中的所有元素：

.timeline {
    height: 100%;

    canvas {
        position: absolute;
        width: 100%;
    }
    figcaption {
        text-transform: uppercase;
    }
    h2 {
        color: #b2cde9;
    }
}

我习惯于这样做：

.timeline {
    height: 100%;
}

.timeline canvas {
    position: absolute;
    width: 100%;
}
.timeline figcaption {
    text-transform: uppercase;
}
.timeline h2 {
    color: #b2cde9;
}

第一个选择是个好主意/可能吗？它在较旧的浏览器中工作吗

我之所以提到这一点，是因为我以前从未见过有人提到它，而且我已经用CSS编写代码两年了。

确实如此

更少的是精益CSS，它是一个CSS预处理器，可以编译成CSS

---

正如括号中提到的那样，您知道它。

第一个示例是LESS，一个CSS预处理器。这不是有效的CSS本身，它需要“编译”成原始CSS。代码笔是为你做的。编译LESS生成的实际CSS看起来与第二个示例几乎相同，但空白更少

事实上，如果我们查看该iframe的源代码，我们可以确切地看到它是如何编译的，并且它与您所写的内容几乎相同：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  color: #2C2C2C;
  min-width: 600px;
  height: 100%;
  background: white;
  font: 400 1em 'Lato';
  -webkit-font-smoothing: antialiased;
}
#timeline {
  padding-top: 5%;
}
.timeline {
  height: 100%;
  position: relative;
}
.timeline canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.timeline figcaption {
  font: 900 190% 'Lato';
  text-transform: uppercase;
  -webkit-text-stroke: .25px;
}
.timeline h2 {
  font: 400 400% 'Raleway';
  padding-bottom: 100px;
  color: #b2cde9;
}
.timeline h6 {
  color: #0090F5;
  font: 400 80% Tahoma;
}
.timeline p,
.timeline ol {
  font: 400 95% 'Raleway';
  padding: 3px 0 20px 0;
  color: #575757;
  text-align: justify;
  width: 70%;
}
.timeline ol {
  list-style: disc;
  margin-top: -20px;
  padding-left: 40px;
}
.timeline figure {
  float: right;
  width: 100%;
}
.timeline article {
  position: relative;
  width: 38%;
  overflow: hidden;
  margin-bottom: 100px;
}
.timeline article:first-of-type {
  float: left;
  text-align: right;
}
.timeline article:first-of-type p,
.timeline article:first-of-type figure {
  float: right;
}
.timeline article:last-of-type {
  float: right;
}
.timeline article:last-of-type h2 {
  color: #c6e0aa;
}
.timeline article:last-of-type h6,
.timeline article:last-of-type a {
  color: #40aa00;
}
.timeline article:last-of-type a:hover {
  color: #95D40D;
}

---

和是编写对作者友好的CSS的两个常见选项，带有选择器嵌套（以及许多其他功能），可编译为浏览器的普通CSS。

第一种方法是使用Sass，它允许在CSS选择器中嵌套。像这个例子：

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

  li { display: inline-block; }

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

---

来源：

代码笔是用lessy编写的。您必须使用一个“预处理器”来编译成CSS。@koala\u dev:但令人困惑的是，它称之为“CSS（LESS）”。即使是JSFIDLE也能做到这一点，例如，当您将样式语言设置为SCSS时，只需调用样式面板“SCSS”。如果您还没有使用SASS或更少，则应该这样做。他们让写CSS变得几乎可以忍受well@meagar你是对的，链接显示出来，对不起。但是从这里显示的语法来看，这是可能的。