css - 使用没有 JS 的选择器按名称将类应用于 CSS 元素

Question

是否可以像下面的示例那样将带有 CSS 的类应用于子元素，而不添加 <el class="classname">每个元素？

HTML

<div id="container">
   <p>TEXT</p>
   <div>text</div>

   <p>TEXT</p>
   <div>text</div>
</div>

CSS

#container {
   background-color:#000;
   color:#FFF;
}
#container > p {
   color:#F0F0F0;
   /* APPLY ALSO CLASS TITLE TO ALL #container > p */
}
#container > div {
   font-size:125%;
   /* APPLY ALSO CLASS WRITE TO ALL #container > div */
}

.titles {
     font-family:....;
     font-style:....;
     /* and so on */
}
.write {
     /* some stuff */
}

Answer 1

没有。在 CSS 中没有办法表明您希望 #container > p 也包含您为 .titles 编写的所有样式。

但是，看看Sass .编写 Sass 与编写 CSS 非常相似，但它可以让您完全按照此处描述的方式进行操作。你可以这样写:

.titles { 
    ...
}
#container > p {
    @extend .titles;
    ...
}

这不是浏览器知道如何做的事情，但浏览器永远看不到它。 Sass 将您的特殊代码转换为真正的 CSS，然后您可以在您的网站上使用它。

使用纯 CSS，您必须执行如下操作:

.titles, #container > p, #container >div {
    ...
}