freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
bad87fee1348bd9aecf08806	使用 class 选择器设置单个元素的样式	0	https://scrimba.com/c/c2MvDtV	18337

--description--

CSS 的class具有可重用性，可应用于各种 HTML 元素。

一个 CSSclass声明示例，如下所示：

<style>
  .blue-text {
    color: blue;
  }
</style>

可以看到，我们在<style>样式声明区域里，创建了一个名为blue-text的class选择器。 你可以将 CSSclass选择器应用到一个HTML元素里，如下所示： <h2 class="blue-text">CatPhotoApp</h2> 注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。

--instructions--

在style样式声明里，把h2元素选择器改为.red-textclass 选择器，同时将颜色blue变为red。

在h2元素里，添加一个class属性，且值为'red-text'。

--hints--

h2元素应该为红色。

assert($('h2').css('color') === 'rgb(255, 0, 0)');

h2元素应含有red-text class 选择器。

assert($('h2').hasClass('red-text'));

style样式声明区域里应该包含一个red-text class 选择器，并且它的颜色应为红色。

assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));

不要在h2元素里使用行内样式：style="color: red"。

assert($('h2').attr('style') === undefined);

--solutions--