选择一个元素及其所有后代元素

Question

选择一个元素和它的所有后代元素：

.media, .media * {color: #f00;}

我只能使用一个选择器而不是用逗号分隔的两个选择器吗？我正在寻找一种更有效的输入方式。

Answer 1

使用XPath你有

descendant-or-self

axis

但是CSS中没有这样的选择器

Answer 2

2023 年，最近对 CSS 语法和可用伪类的补充带来了一些有趣的替代方法来解决这个问题（尽管仍然不如真正原生的 self-or-descendant 组合器理想）。

让我们考虑一个假设的

.prose

类，它标识站点的创作内容，可以通过例如具有嵌套结构的

<article>

或

<section>

块，或在例如

<p>

直接包含文本的元素。

只有严格的后代组合器和传统的 CSS 语法，

<p>

元素需要添加一个（可能是非语义的）包装器，例如

<div>

元素。

或者，可以以匹配自身和后代的方式编写规则，但这涉及重复（且容易出错）的样板文件：

.prose h1, h1.prose {...}
.prose h2, h2.prose {...}
.prose h3, h3.prose {...}
.prose h4, h4.prose {...}
.prose h5, h5.prose {...}
.prose h6, h6.prose {...}

.prose p, p.prose {...}

.prose blockquote, blockquote.prose {...}

/* And so forth... */

利用最近的 CSS 开发，上面的内容可以按以下方式重写：

.prose, .prose * {
    
    &:is(h1) {...}
    &:is(h2) {...}
    &:is(h3) {...}
    &:is(h4) {...}
    &:is(h5) {...}
    &:is(h6) {...}
    
    &:is(p) {...}

    &:is(blockquote) {...}
}

很明显，

&:is(...)

仍然是样板，但是重复已经大大减少了，这也算是一种进步。

警告： 截至 2023 年 5 月，浏览器对原生 CSS 嵌套的支持仍在进行中（参见 https://caniuse.com/css-nesting），利用它的 CSS 代码应该是转换为非嵌套语法（例如，使用 postcss-nesting 插件）。