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 {
    ...
}

Answer 2

不，您不能将类应用于CSS中的元素。你要做的是复制.tiles＆amp;的代码。 .write个类并将其应用于您希望以这种方式设置的元素。

可以使这种关系更容易管理的东西是CSS预处理器，例如Less或Sass

Answer 3

这可行，但不是很优雅。不幸的是，所有样式都将用在父元素上，这会在大多数时候引起问题。您需要的是SASS或LESS，如上所述，因此您可以创建可重复使用的功能，以实现灵活性。

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

div id="container" class="titles write">
   <p>TEXT</p>
   <div>text</div>

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

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

3 个答案: