将一个css类添加到html包装元素中

Question

我正在创建一个自定义CSS类，我不知道如何编写代码。

该元素的标题使用h2字体大小，其他所有内容使用标准段落字体大小。

我想为h2标题编写自定义大小。

我的自定义类名是hosting-post-slider，我的代码如下所示...

.hosting-post-slider {

}

我不确定如何在上面的CSS中引用h2标题，所以我可以为这个元素定制h2。

Answer 1

如果您在类

中有一些样式

.hosting-post-slider {
color: red;
}

然后要使单个h2标签具有此样式，只需在HTML中执行此操作：

<h2 class="hosting-post-slider">The heading</h2>

如果您希望所有h2都具有此样式，请将该类添加到所有h2元素，或者将您的css更改为定位所有h2，例如：

.h2 {
color: red;
}

Answer 2

这是您要找的，这会选择您自定义类的所有h2元素

h2.hosting-后滑块{    }

Answer 3

以下代码仅引用h2元素的此实例。您添加到其中的任何样式都只会应用于此元素。

完整的代码如下所示：

.hosting-post-slider h2 {
  font-size: 30px;
}

<div className="hosting-post-slider">
  <h2>My header</h2>
  <p>My paragraph</p>
</div>