2.5 KiB
2.5 KiB
id | challengeType | videoUrl | forumTopicId | title |
---|---|---|---|---|
bad87fee1348bd8aedf06756 | 0 | https://scrimba.com/c/cRkpDhB | 18251 | ID 选择器优先级高于 Class 选择器 |
Description
h1
元素添加 id 属性,来覆盖 class 属性定义的同名样式。
Instructions
h1
元素添加 id 属性,属性值为orange-text
。设置方式如下:
<h1 id="orange-text">
h1
元素继续保留blue-text
和pink-text
class。
在style
元素中创建名为orange-text
的 id 选择器。例子如下:
#brown-text {
color: brown;
}
注意:无论在pink-text
class 的上面或者下面声明,id 选择器的优先级总是会高于 class 选择器。
Tests
tests:
- text: '<code>h1</code>元素应该包含<code>pink-text</code> class。'
testString: assert($("h1").hasClass("pink-text"));
- text: '<code>h1</code>元素应该包含<code>blue-text</code> class。'
testString: assert($("h1").hasClass("blue-text"));
- text: '<code>h1</code>的 id 属性值为<code>orange-text</code>。'
testString: assert($("h1").attr("id") === "orange-text");
- text: '应该只有一个<code>h1</code>元素。'
testString: assert(($("h1").length === 1));
- text: '创建名为<code>orange-text</code>的 id 选择器。'
testString: assert(code.match(/#orange-text\s*{/gi));
- text: '不要在<code>h1</code>元素里面使用<code>style(行内样式)</code>。'
testString: assert(!code.match(/<h1.*style.*>/gi));
- text: '<code>h1</code>元素的字体颜色应为橘色。'
testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
Challenge Seed
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
Solution
// solution required