---
id: bad87fee1348bd8aedf06756
title: Override Class Declarations by Styling ID Attributes
challengeType: 0
videoUrl: ''
localeTitle: Переопределить объявления классов с помощью атрибутов идентификатора стилизации
---
## Description
Мы просто доказали, что браузеры читают CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать любую декларацию CSS. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с pink-text
и blue-text
и сделаем ваш элемент h1
оранжевым, предоставив элементу h1
идентификатор, а затем стиль этого идентификатора.
## Instructions
Дайте элементу h1
атрибут id
orange-text
. Помните, что стили id выглядят следующим образом: <h1 id="orange-text">
Оставьте классы blue-text
и pink-text
на вашем элементе h1
. Создайте объявление CSS для вашего orange-text
в элементе style
. Вот пример того, как это выглядит: # brown-text {
коричневый цвет;
}
Примечание. Неважно, объявляете ли вы этот CSS выше или ниже класса розового текста, поскольку атрибут id всегда будет иметь приоритет.
## 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
```