---
id: bad87fee1348bd9aedf07756
title: Override All Other Styles by using Important
challengeType: 0
videoUrl: ''
localeTitle: 'Переопределите все остальные стили, используя важные'
---
## Description
Ура! Мы просто доказали, что встроенные стили переопределяют все объявления CSS в вашем элементе style
. Но ждать. Есть один последний способ переопределить CSS. Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, почему вы хотели бы переопределить CSS. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать !important
Давайте вернемся к нашему объявлению класса pink-text
. Помните, что наш класс pink-text
был переопределен последующими объявлениями классов, декларациями id и встроенными стилями.
## Instructions
Давайте добавим ключевое слово !important
для вашего объявления цвета вашего розового текста, чтобы 100% убедиться, что ваш элемент h1
будет розовым. Пример того, как это сделать: color: red !important;
## 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", "Your h1
element should have the id of orange-text
.");'
- text: 'Ваш элемент h1
должен иметь встроенный стиль color: white
.'
testString: 'assert(code.match(/h1 element should have the inline style of color: white
.");'
- text: 'В объявлении класса pink-text
должно быть ключевое слово !important
Important, чтобы переопределить все другие объявления.'
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your pink-text
class declaration should have the !important
keyword to override all other declarations.");'
- text: Ваш элемент h1
должен быть розовым.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1
element should be pink.");'
```
## Challenge Seed
## Solution
```js
// solution required
```