编写父/子CSS的替代/不那么冗长的方式[重复]答案

【问题标题】：Alternative / Less Verbose Way to Write Parent / Child CSS [duplicate]编写父/子CSS的替代/不那么冗长的方式[重复]
【发布时间】：2017-08-20 21:17:17
【问题描述】：

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

#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 需要更改/样式的大型网站，我需要使用多个选择器。

【问题讨论】：

#parent-div #child-div > * 针对child-div 内的所有直系子级
这是 CSS 预处理器真正派上用场的地方。我知道这不是您问题的直接答案，但是如果您使用 LESS 或 SCSS 之类的东西（以牺牲更多配置为代价，并且需要在文件更改时运行观察程序来构建您的 CSS），这可能会不那么冗长。
我投票决定将此问题作为离题结束，因为要求重构工作代码的问题属于 Code Review 站点，而不是 Stack Overflow 站点。
@EmilyChewy，Tyler 为本网站做出了巨大贡献。我不认为他是在报复，只是遵循了指导方针。无论如何，#child-div 的后代还有哪些其他元素？
@Michael_B：公平地说，罐头评论以“我投票结束这个问题作为离题，因为......”这不是第一次有人指出不必要的开场白的报复语气，现在我们有证据表明这种看法不仅仅是理论上的。

【解决方案1】：

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

例如：

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

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

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

如果父divs 都被ids 定位，（假设你正确使用ids 并且每个只有一个实例）你可以省略#parent-div 标识符，因为#child-div 就足够了。

在许多情况下，您的属性（如字体颜色和字体大小）将基于规则的specificity 和页面上的继承而被继承。这意味着您可以通过使#child-div 本身的这些属性（并且仅在必要时将它们覆盖到更远的位置）来省略#child-div 的子代的许多声明。

另外，就像@kukkuz 建议的那样，如果您尝试将相同的属性应用于#child-div 的所有直接子级，那么您可以使用#child-div > *。

【讨论】：