freeCodeCamp/override-styles-in-subsequent-css.md at 873fce02a2d2124f3b76ce3f317fb29b34abb542

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

2.3 KiB

Raw Blame History

id, challengeType, videoUrl, forumTopicId, title

id	challengeType	videoUrl	forumTopicId	title
bad87fee1348bd9aedf04756	0	https://scrimba.com/c/cGJDQug	18253	Class 选择器的优先级高于继承样式

Description

"pink-text" class 覆盖了body元素的 CSS 声明。我们刚刚证明了我们的 class 会覆盖body的 CSS 样式。那么，下一个问题是，我们要怎么样才能覆盖我们的pink-textclass？

Instructions

创建一个字体颜色为blue的blue-textCSS class，并确保它在pink-text下方声明。在含有pink-textclass 的h1元素里面，再添加一个blue-textclass，这时候，我们将能看到到底是谁获胜。 HTML 同时应用多个 class 属性需以空格来间隔，例子如下: class="class1 class2" 注意： HTML 元素里应用的 class 的先后顺序无关紧要。但是，在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。因为.blue-text在.pink-text的后面声明，所以.blue-text会覆盖.pink-text的样式。

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>blue-text</code>和<code>pink-text</code>需同时应用于<code>h1</code>元素上。'
    testString: assert($(".pink-text").hasClass("blue-text"));
  - text: '<code>h1</code>元素的颜色应为蓝色。'
    testString: assert($("h1").css("color") === "rgb(0, 0, 255)");

Challenge Seed

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }
</style>
<h1 class="pink-text">Hello World!</h1>

Solution

// solution required

2.3 KiB Raw Blame History Unescape Escape