---
id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes
challengeType: 0
videoUrl: ''
localeTitle: تجاوز تعريفات الطبقة عن طريق تحديد سمات المعرف
---
## Description
لقد أثبتنا فقط أن المتصفحات تقرأ CSS من الأعلى إلى الأسفل. ويعني هذا أنه في حالة وجود تعارض ، سيستخدم المتصفح أي إعلان من لغة CSS يظهر في النهاية. لكننا لم ننتهي بعد. هناك طرق أخرى يمكنك من خلالها تجاوز CSS. هل تتذكر سمات معرف؟ لنقم بتجاوز فصول blue-text
pink-text
blue-text
، وجعل عنصر h1
برتقاليًا ، من خلال إعطاء عنصر h1
ثم تصميم ذلك المعرف.
## Instructions
امنح عنصر h1
سمة id
orange-text
. تذكر أن أنماط المعرّف تبدو كالتالي: <h1 id="orange-text">
ترك فصول pink-text
blue-text
pink-text
في عنصر h1
. قم بإنشاء تعريف CSS لمعرف orange-text
الخاص بك في عنصر style
الخاص بك. إليك مثال على ما يبدو عليه هذا: # brown-text {
اللون: بني؛
}
ملاحظة: لا يهم ما إذا كنت قد أعلنت CSS هذا أعلى أو أسفل فئة النص الوردي ، نظرًا لأن سمة المعرّف ستحظى دائمًا بالأسبقية.
## Tests
```yml
tests:
- text: يجب أن يحتوي عنصر h1
pink-text
.
testString: 'assert($("h1").hasClass("pink-text"), "Your h1
element should have the class pink-text
.");'
- text: يجب أن يحتوي عنصر h1
على الفصل blue-text
.
testString: 'assert($("h1").hasClass("blue-text"), "Your h1
element should have the class blue-text
.");'
- text: امنح عنصر h1
معرف orange-text
.
testString: 'assert($("h1").attr("id") === "orange-text", "Give your h1
element the id of orange-text
.");'
- text: يجب أن يكون هناك عنصر h1
واحد فقط.
testString: 'assert(($("h1").length === 1), "There should be only one h1
element.");'
- text: قم بإنشاء إعلان CSS لمعرف orange-text
الخاص بك
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your orange-text
id");'
- text: لا تعطي h1
الخاص بك أي سمات style
.
testString: 'assert(!code.match(//gi), "Do not give your h1
any style
attributes.");'
- text: يجب أن يكون عنصر h1
باللون البرتقالي.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your h1
element should be orange.");'
```
## Challenge Seed
## Solution
```js
// solution required
```