css - 在两种组件类型上设置样式

Question

我好像脑子有问题了。

我应该如何设计一个 CSS 来包含分类为intro的h1和p？！

这将针对所有 h1 s 和p s。

h1, p { ... }

但是这个

h1, p .intro { ... }

仅针对h1归类为intro，而不影响归类为 intro 的 *p* s。那是什么语法（所以我不必定义以下内容？

h1.intro { ... }
p.intro { ... }

我还测试了以下内容，但没有成功。

h1.intro, p. intro { ... }

Answer 1

几乎正确。跳过p处的空白。

h1.intro, p.intro { ... }

当用作OP粘贴它时，即

h1.intro, p .intro { ... }

解释器将看到一个名为intro的类未连接到任何内容的上下文，即等同于以下内容。

h1.intro, .intro { ... }

Answer 2

只需使用逗号分隔选择器：

h1.intro,
p.intro {
 /*...*/
}

JS 小提琴演示。

或者您可以定义所有常见样式，然后仅覆盖具有该类的那些元素的特定样式：

.intro {
    /* ...all generic default styles */
}

p.intro,
h1.intro {
    /* specific style overrides for the h1 and p elements of this class */
}

JS 小提琴演示。

原因是：

h1.intro, p. intro

不起作用（取决于您在这种情况下对“作品”的评估）是这将h1设置 classintro的样式，但将设置作为元素intro后代的class 元素的样式， the和p之间的空格暗示后代关系。p.intro