Question

我有一个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＆gt; h1，h2，h3，p但我知道这不会起作用。

关于如何缩短这一点的任何想法都会很精彩？我有很多需要更改/样式的CSS的网站，我需要使用多个选择器。

Answer 1

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

例如：

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

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

我所知道的没有任何其他方法。

要了解有关详情，请参阅css :any @ MDN。

Answer 2

也许尝试一种反向的方法。

不是定位元素，而是排除元素。

您需要知道作为子div后代的其他元素类型。

因此，如果您要为h1，h2，h3和p标记添加样式，请尝试以下操作：

#parent-div #child-div *:not(h4):not(h5):not(h6):not(div):not(span):not(nav):not(section)

但是，如果元素类型太多，未知或不可预测，那么您的原始方法看起来非常好。

#parent-div #child-div h1,
#parent-div #child-div h2,
#parent-div #child-div h3,
#parent-div #child-div p

Answer 3

如果div的父母和子女id都被定位，（假设您正确使用id且每个只有一个实例），则可以省略#parent-div标识符，因为#child-div就足够了。

在许多情况下，您的属性将根据规则的specificity和页面上的继承继承（如字体颜色和字体大小）。这意味着您可以通过使#child-div本身的属性（并且只在必要时在链中进一步覆盖它们）来省略#child-div子元素上的许多声明。

此外，与@kukkuz建议一样，如果您尝试将相同的属性应用于#child-div的所有直接子项，则可以使用#child-div > *。