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

Question

我似乎已经陷入了困境。

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

这将定位所有 h1 和 p 。

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 Fiddle demo

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

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

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

JS Fiddle demo

原因：

h1.intro, p. intro

不起作用（取决于您在此上下文中对“作品”的评价）是这将设置h1类intro的样式，但会设置类intro的元素的样式这是p元素的后代，p和.intro之间的空格意味着后代关系。