css - 编写父/子 CSS 的替代/更简洁的方式

<分区>

我有一个 div，我只能通过 CSS 中的这个方法来选择。

#parent-div #child-div {// styles}

我想更改子 div 中的所有 h1、h2、h3 和 p 标签，到目前为止我会按如下方式进行:

#parent-div #child-div h1, #parent-div #child-div h2, #parent-div 
#child-div h3, #parent-div #child-div p {
//styles
}

有没有更有效的方法？一遍又一遍地输入#parent-div #child-div 似乎是在浪费时间。从逻辑上讲，我想做 #parent-div #child-div > h1, h2, h3, p 但我知道这行不通。

关于如何缩写它的任何想法都很棒？我有一个包含大量 CSS 的大型网站，需要在其中使用多个选择器来更改/设置样式。

最佳答案

有这个实验特性:any。目前支持基于 gecko 和一些基于 webkit 的浏览器。

例如:

#parent-div > #child-div > :-moz-any(h1, h2, h3, p){
  /*stuff*/
}

请注意，它正在被标准化为 :matches。

据我所知，没有任何其他解决方法。

要了解更多信息，请参阅 css :any @ MDN .

关于css - 编写父/子 CSS 的替代/更简洁的方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45777114/