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