css - CSS：在同一元素内定位其他 html 元素

Question

是否有可能合成这个 css 代码......

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

...成为一个简单的规则？我正在为这个挠头......：P

谢谢

佩德罗

Answer 1

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

#myId * {}

Answer 2

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

#myId * { }

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

Answer 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, {}

Answer 4

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

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

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

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