CSS：在同一元素内定位misc 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

我通过Factor CSS运行了您的规则，这就是结果：

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

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

可能更短的唯一其他方式，但仅当您想要{strong>未定位#myId内的某个特定元素时才可能#myid :not(img) {}。

Answer 4

如前所述，您可以使用通配符选择器匹配任何元素，因此#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, {}