CSS：在同一元素内定位其他 html 元素答案

【问题标题】：CSS: target misc html elements inside same elementCSS：在同一元素内定位其他 html 元素
【发布时间】：2013-05-12 16:52:09
【问题描述】：

是否可以合成这个 css 代码...

#myId p, #myId h1, #myId h2, #myId h3, #myId h4, #myId h5, #myId h6, {}

... 变成一个简单的规则？我在这个问题上摸不着头脑......：P

感谢

佩德罗

【问题讨论】：

标签： css

【解决方案1】：

您是否需要一个规则来影响#myId 的所有继任者？那么这应该适合你：

#myId * {}

【讨论】：

【解决方案2】：

如果这些是您的 #myId 容器中唯一可以使用的元素：

#myId * { }

如果没有，那么如果不更改标记（添加类、将它们包装在容器中等），您将无法真正做类似的事情。 p 和 h1...h6 元素是单独的元素，在风格上不相关。从样式表的角度来看，p 标签对h3 标签就像img 标签对small 标签一样。

【讨论】：

【解决方案3】：

如前所述，您可以使用通配符选择器匹配任何元素，例如#myId *' will match all elements inside#myId`。如果您只想匹配直接子级，请使用直接子级选择器：

#myId > *

如果您想选择一个较小的后代列表，您可能需要调查http://lesscss.org/。这允许您嵌套样式，如下所示：

#myId {
    // #myId styles here
    p, h1, h2, h3, h4, h5, h6 {
        // Some more styles here
    }
}

显然您仍然需要指定每个子元素，但它允许您更改父选择器一次，而不是为每个子元素更改。这将编译为您开始使用的相同选择器：

#myId p, #myId h1, #myId h2, #myId h3, #myId h4, #myId h5, #myId h6, {}

【讨论】：

【解决方案4】：

我通过Factor CSS 运行了您的规则，结果如下：

#myId h1, #myId h2, #myId h3, #myId h4, #myId h5, #myId h6, #myId p {}

因此，除非您需要影响#myId 的所有继任者的规则，否则我认为您不走运。

可能更短的唯一另一种方法是#myid :not(img) {}。

【讨论】：