freeCodeCamp

2.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf04756	Override Styles in Subsequent CSS	0

Description

undefined

Instructions

إنشاء فئة CSS إضافية تسمى blue-text يعطي عنصر باللون الأزرق. تأكد من أنه أقل من pink-text الفصل pink-text . قم blue-text فئة blue-text على عنصر h1 بالإضافة إلى فصل pink-text ، ودعنا نرى أيهما يفوز. يتم تطبيق سمات فئات متعددة على عنصر HTML بمسافة بينها مثل: class="class1 class2" ملاحظة: لا يهم أي ترتيب يتم سرد الفئات في عنصر HTML. ومع ذلك ، فإن ترتيب إعلانات class في قسم <style> هو ما هو مهم. سوف يكون للإعلان الثاني الأسبقية على الأول. نظرًا لأنه يتم الإعلان عن .blue-text الثانية ، فإنه يؤدي إلى تجاوز سمات .pink-text

Tests

tests:
  - text: يجب أن يحتوي عنصر <code>h1</code> <code>pink-text</code> .
    testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
  - text: يجب أن يحتوي عنصر <code>h1</code> على الفصل <code>blue-text</code> .
    testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
  - text: يجب أن ينتمي <code>blue-text</code> <code>pink-text</code> إلى نفس عنصر <code>h1</code> .
    testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
  - text: ''
    testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'

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.5 KiB Raw Blame History