如何同时选择给定元素及其所有子元素？

Question

好吧，我知道如何分别做这两件事：

#elemID {  } /* selects only one element */
#elemID * {  } /* selects all its children elements but not the element itself */

我知道我可以这样做：

#elemID, #elemID * { }

但是有没有办法避免这种情况重复发生？

Answer 1

不，没有比这更短的了。

请注意，如果您确实只想要 #elemID 的所有

children

，而不是所有 descendants，则需要使用子组合器：

#elemID, #elemID > *

正如 Šime Vidas 所评论的那样，某些属性（例如

color

）默认情况下会自动由后代元素继承。如果您尝试为

#elemID

提供文本颜色，则不需要将其显式并递归地应用到其中的元素。有关详细信息，请参阅有关 CSS 继承的SitePoint Reference。

Answer 2

不。但如果存在等效选择器，您可以选择其父级：

.parent * { ... }

Answer 3

正如其他人所说，这个问题没有本地解决方案。

但在今年，您可以通过 CSS Nesting 来实现这一目标，该功能改编自 CSS 预处理器，例如 Chrome 和许多其他浏览器的 LESS。请查看此处检查哪些浏览器支持它。

你这样做：

#elemID {
    &, & * {
        /* Your style here */
    }
}

&

就像封闭选择器的副本，因此您基本上可以实现您提到的

#elemID, #elemID *

选择器，但只写

#elemID

一次。

如果您计划有许多类似的选择器，您可以使代码稍微更紧凑，如下所示：

#elemID { &, & * {
    /* Your style here */
}}