2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
id: bad87fee1348bd9aecf08806
|
2020-12-16 07:37:30 +00:00
|
|
|
|
title: 使用 class 选择器设置单个元素的样式
|
2018-10-10 22:03:03 +00:00
|
|
|
|
challengeType: 0
|
2019-12-13 05:47:57 +00:00
|
|
|
|
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
|
|
|
|
forumTopicId: 18337
|
2018-10-10 22:03:03 +00:00
|
|
|
|
---
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --description--
|
|
|
|
|
|
|
|
|
|
CSS 的`class`具有可重用性,可应用于各种 HTML 元素。
|
|
|
|
|
|
|
|
|
|
一个 CSS`class`声明示例,如下所示:
|
2019-12-13 05:47:57 +00:00
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<style>
|
|
|
|
|
.blue-text {
|
|
|
|
|
color: blue;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
可以看到,我们在`<style>`样式声明区域里,创建了一个名为`blue-text`的`class`选择器。 你可以将 CSS`class`选择器应用到一个HTML元素里,如下所示: `<h2 class="blue-text">CatPhotoApp</h2>` 注意:在`style`样式区域声明里,`class`需以`.`开头。而在 HTML 元素里,`class`属性的前面不能添加`.`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --instructions--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
在`style`样式声明里,把`h2`元素选择器改为`.red-text`class 选择器,同时将颜色`blue`变为`red`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
在`h2`元素里,添加一个`class`属性,且值为`'red-text'`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --hints--
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
`h2`元素应该为红色。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
`h2`元素应含有`red-text` class 选择器。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert($('h2').hasClass('red-text'));
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
`style`样式声明区域里应该包含一个`red-text` class 选择器,并且它的颜色应为红色。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
|
|
|
|
```
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
不要在`h2`元素里使用行内样式:`style="color: red"`。
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
```js
|
|
|
|
|
assert($('h2').attr('style') === undefined);
|
2018-10-10 22:03:03 +00:00
|
|
|
|
```
|
2020-02-17 16:40:55 +00:00
|
|
|
|
|
2020-12-16 07:37:30 +00:00
|
|
|
|
# --solutions--
|
|
|
|
|
|