Files

camperbot 43496432d6 chore(i18n,learn): processed translations (#45555 )

2022-03-28 20:14:21 +00:00

2.4 KiB

Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf04756	後続の CSS でスタイルをオーバーライドする	0	https://scrimba.com/c/cGJDQug	18253	override-styles-in-subsequent-css

--description--

pink-text クラスが body 要素の CSS 宣言より優先されました！

私達の作成したクラスが body 要素の CSS をオーバーライドすることを証明しました。次の論理的な疑問は、pink-text クラスをオーバーライドするにはどうすればいいのかということです。

--instructions--

要素に青の文字色を設定する blue-text という CSS クラスを追加してください。必ず pink-text クラスの宣言より下に追加してください。

h1 要素に対し、pink-text クラスに加えて blue-text クラスも適用して、どちらが勝つか見てみましょう。

1 つの HTML 要素に複数のクラス属性を適用するには、以下のようにスペースで区切ります:

class="class1 class2"

注: HTML 要素にクラスを並べる順番は関係ありません。

しかし、<style> セクション内での class 宣言の順番が重要になります。 2 番目の宣言は常に最初の宣言よりも優先されます。 .blue-text は2番目に宣言されているため、 .pink-text の属性をオーバーライドします。

--hints--

h1 要素にはクラス pink-text が必要です。

assert($('h1').hasClass('pink-text'));

h1 要素にはクラス blue-text が必要です。

assert($('h1').hasClass('blue-text'));

blue-text と pink-text の両方が同じ h1 要素に適用されている必要があります。

assert($('.pink-text').hasClass('blue-text'));

h1 要素が青で表示されている必要があります。

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

--seed--

--seed-contents--

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

--solutions--

<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>

2.4 KiB Raw Permalink Blame History