[{"data":1,"prerenderedAt":1334},["ShallowReactive",2],{"$fPyIivFzT_1XKThN_HJIXrXDLIh-XyPWAXO-AnjWbcjw":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":70,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":73,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":399,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":402,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":646,"mdc--oeh927-key":666,"mdc-nvusxg-key":697,"mdc-9u41-key":705,"mdc-euke2-key":713,"mdc--vrpus7-key":721,"mdc--ovl9fy-key":729,"mdc-1t9uqf-key":746,"mdc-gxr99p-key":761,"mdc--oms92x-key":863,"mdc--w69c9m-key":893,"mdc--4xzrfx-key":1121,"mdc-uu2ewz-key":1159,"mdc--yvf8t4-key":1292},{"content":4,"quizQuestionContent":40,"type":59,"pageMeta":60},[5,9,13,16,20,24,27,30,34,37],{"id":6,"value":7,"isTypeH1":8},"1892","CSS: какой цвет текста при конфликте селекторов",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4322","Разбор по шагам","step-by-step-analysis",{"id":14,"value":15,"isTypeParagraph":8},"9942","Рассматриваемый элемент — это `div` с атрибутами `id=\"element\"` и `class=\"element\"`, значит одновременно подходят селекторы `#element`, `.element` и `div.element`.  \nСреди подходящих правил выбирается то, у которого выше специфичность селектора; при разных специфичностях порядок в CSS (кто ниже написан) не меняет победителя.  \nУ `#element` специфичность выше, чем у `.element` и `div.element`, поэтому итоговый цвет текста будет `red`.\n\n```\n\u003Cdiv id=\"element\" class=\"element\">\n    Таким образом, постоянное\n\u003C/div>\n```",{"id":17,"description":18,"titleAlert":19,"isTypeAlertInfo":8},"622","Повторяющиеся правила `div.element` действительно конфликтуют между собой, но они «соревнуются» только внутри своей группы одинаковой специфичности и не могут обойти правило с `#element`, потому что у `#element` выше специфичность.",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4323","Теория: специфичность","theory-specificity",{"id":25,"value":26,"isTypeParagraph":8},"9943","Специфичность — это правило приоритета, по которому браузер определяет «вес» селектора и выбирает, какое значение свойства применить при конкурирующих правилах.  \nВ учебной форме специфичность удобно считать как тройку `ID - CLASS - TYPE`, где `ID` — количество `#id`, `CLASS` — количество классов/атрибутов/псевдоклассов, `TYPE` — количество селекторов по тегу и псевдоэлементов.\n\nТаблица специфичности для данной задачи:\n\n| Селектор | Что выбирает | Специфичность (ID-CLASS-TYPE) | Цвет из правила |\n|---|---|---:|---|\n| `#element` | элемент с `id=\"element\"` | 1-0-0 | red |\n| `.element` | элементы с `class=\"element\"` | 0-1-0 | blue |\n| `div.element` | `div` с `class=\"element\"` | 0-1-1 | yellow / magenta (зависит от порядка) |\n\nКлючевое сравнение: `1-0-0` (ID) «старше», чем `0-1-1` (класс + тег), потому что сравнение идёт слева направо, и более высокий разряд `ID` побеждает независимо от остальных.\n\n```\n/* Специфичность (ID-CLASS-TYPE) */\n#element      { color: red;     } /* 1-0-0 */\n.element      { color: blue;    } /* 0-1-0 */\ndiv.element   { color: yellow;  } /* 0-1-1 */\ndiv.element   { color: magenta; } /* 0-1-1 (то же самое) */\ndiv.element   { color: magenta; } /* 0-1-1 */\ndiv.element   { color: magenta; } /* 0-1-1 */\ndiv.element   { color: magenta; } /* 0-1-1 */\n```",{"id":28,"description":29,"titleAlert":19,"isTypeAlertWarning":8},"678","Селекторы с `#id` часто делают переопределения сложнее: чтобы «перебить» `#id`, обычно требуется либо другой `#id` (или несколько), либо `!important`, а это ухудшает поддерживаемость стилей.",{"id":31,"value":32,"anchor":33,"isTypeH2":8},"4324","Теория: каскад и порядок","theory-cascade-and-order",{"id":35,"value":36,"isTypeParagraph":8},"9944","Каскад — это общий механизм выбора значений CSS-свойств (кто «победит» при конкурирующих стилях), где учитываются важность (`!important`), происхождение стилей и другие шаги; специфичность — один из ключевых шагов этого механизма.  \nЕсли конкурирующие правила находятся в одном месте (например, в одном блоке `\u003Cstyle>`) и имеют одинаковую специфичность, применяется правило, объявленное позже (ниже по коду).\n\nВ данной задаче важно разделить два конфликта:\n\n1) Конфликт между `div.element { color: yellow; }` и последующими `div.element { color: magenta; }`  \nУ них одинаковая специфичность `0-1-1`, поэтому среди них победит самое последнее по порядку — `magenta`.\n\n2) Конфликт между победителем из группы `div.element` и правилом `#element { color: red; }`  \nУ `#element` специфичность `1-0-0`, она выше, значит итоговый цвет становится `red`, даже если ниже в CSS написаны другие правила с меньшей специфичностью.\n\nНебольшая схема принятия решения для этого примера:\n\n```\nШаг 1. Найти все правила, которые подходят элементу:\n- #element\n- .element\n- div.element (несколько раз)\n\nШаг 2. Сравнить специфичность:\n- #element     -> 1-0-0  (самая высокая)\n- div.element  -> 0-1-1\n- .element     -> 0-1-0\n\nШаг 3. Выбрать самое специфичное:\n- Побеждает #element -> color: red\n```",{"id":38,"value":39,"isTypeParagraph":8},"9945","Кратко: элемент подходит под `#element`, `.element` и `div.element`, но правило `#element { color: red; }` имеет наибольшую специфичность, поэтому текст будет красным (`red`).",{"id":41,"options":42,"hint":56,"solution":57,"description":58},"1131",[43,46,50,53],{"id":44,"label":45,"isCorrect":8},"4656","red",{"id":47,"label":48,"isCorrect":49},"4657","blue",false,{"id":51,"label":52,"isCorrect":49},"4658","yellow",{"id":54,"label":55,"isCorrect":49},"4659","magenta"," Необходимо выписать все подходящие селекторы, посчитать их специфичность как `ID-CLASS-TYPE`, затем помнить, что порядок «кто ниже в CSS» важен только при равной специфичности.","**Правильный ответ: 1** - red ","Есть шаблон HTML и CSS кода:\n\n```\n\u003Chtml>\n    \u003Chead>\n        \u003Cstyle>\n        #element {\n            color: red;\n        }\n\n        .element {\n            color: blue;\n        }\n\n        div.element {\n            color: yellow;\n        }\n\n        div.element {\n            color: magenta;\n        }\n        \n        div.element {\n            color: magenta;\n        }\n\n        div.element {\n            color: magenta;\n        }\n\n        div.element {\n            color: magenta;\n        }\n        \u003C/style>\n    \u003C/head>\n\u003Cbody>\n    \u003Cdiv id=\"element\" class=\"element\">\n        Таким образом, постоянное\n    \u003C/div>\n\u003C/body>\n\u003C/html>\n```\n\nКакой будет цвет у текста «Таким образом, постоянное»?","quizQuestion",{"title":61,"description":62,"ogTitle":7,"ogDescription":62,"ogImageUrl":63,"canonical":19,"ogLocale":64,"ogSiteName":65,"ogImageType":66,"ogImageWidth":67,"ogImageHeight":68,"ogType":69,"ogUrl":19},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста?","Разбор специфичности и каскада: почему #id перекрывает .class и div.class, даже если ниже объявлены другие правила","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":71,"siteUrl":72},"GOOD WEB JOB!","https://goodwebjob.ru",{"slugs":74},[75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396],{"name":76,"value":77},"Теоретические задания","theoretical-tasks",{"name":79,"value":80},"Что вернёт этот код: typeof (function(){})()","what-this-code-will-return-typeof-function",{"name":82,"value":83},"С чего начать?","where-to-begin",{"name":85,"value":86},"Почему опасно писать прямо в прототипы базовых типов?","why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":88,"value":89},"Backend","backend",{"name":91,"value":92},"Frontend","frontend",{"name":94,"value":95},"Какие логические значения в console.log будут получены?","prototype-what-logical-values-will-be-received-in-console-log",{"name":97,"value":98},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":100,"value":101}," Найти в массиве неповторяющиеся числа","find-non-repeating-numbers-in-an-array",{"name":103,"value":104},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":106,"value":107},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":109,"value":110},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":112,"value":113},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":115,"value":116},"Какое значение выведет консоль с object.property?","what-value-will-the-console-output-with-object-property",{"name":118,"value":119},"Что выведется в console.log([arr[0](), arr[0]()])?","what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":121,"value":122},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":124,"value":125},"Необходимо проверить, являются ли две строки анаграммами друг друга","checks-whether-two-strings-are-anagrams-of-each-other",{"name":127,"value":128},"Определить, является ли слово палиндромом","determines-whether-a-word-is-a-palindrome",{"name":130,"value":131},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":133,"value":134},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":136,"value":137},"Дано дерево (вложенный объект), надо найти сумму всех вершин","given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":139,"value":140},"Для каждой ветви дерева записать номер вложенности данной ветви","for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":142,"value":143},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":145,"value":146},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":148,"value":149},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":151,"value":152},"Напишите функцию, который сделает из массива объект","write-a-function-that-will-make-an-object-out-of-an-array",{"name":154,"value":155},"Что выведет console.log в результате выполнения цикла while?","what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":157,"value":158},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":160,"value":161},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":163,"value":164},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":166,"value":167},"Уникализация значений в массиве","unifying-values-in-an-array",{"name":169,"value":170},"«Расплющивание» массива","flattening-the-array",{"name":172,"value":173},"Что вернёт метод book.getUpperName()?","what-will-the-book-get-upper-name-method-return",{"name":175,"value":176},"Сжатие строк","string-compression",{"name":178,"value":179},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":181,"value":182},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":184,"value":185},"Как браузер после ввода домена понимает, откуда брать сайт?","how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":187,"value":188},"Как домен попадает в DNS в таблицу соответствия: домен – ip","how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":190,"value":191},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":193,"value":194},"Ключевые отличия TCP и UDP","key-differences-between-tcp-and-udp",{"name":196,"value":197},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":199,"value":200},"Что такое HTTP и из чего состоит?","what-is-http-and-what-does-it-consist-of",{"name":202,"value":203},"Что такое заголовки в HTTP и зачем они нужны?","what-are-http-headers-and-why-do-we-need-them",{"name":205,"value":206},"Что такое параметры в HTTP?","what-are-http-parameters",{"name":208,"value":209},"Где находится HTML-код в структуре HTTP-ответа?","where-is-the-html-code-located-in-the-http-response-structure",{"name":211,"value":212},"Что такое HTML?","what-is-html",{"name":214,"value":215},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":217,"value":218},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":220,"value":221},"Что такое cookie?","what-is-a-cookie",{"name":223,"value":224},"Кто является инициатором записи cookie в браузере?","who-initiates-the-cookie-recording-in-the-browser",{"name":226,"value":227},"Есть ли возможность с клиента (с браузера) управлять cookie?","is-it-possible-to-manage-cookies-from-the-client-browser",{"name":229,"value":230},"Лайвкодинг","livecoding",{"name":232,"value":233},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":235,"value":236},"Всё, что идет по HTTPS – оно защищено?","is-everything-that-goes-through-https-secure",{"name":238,"value":239},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":241,"value":242},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":244,"value":245},"Как браузер парсит JavaScript и изображения при рендеринге?","how-the-browser-parses-javascript-and-images-when-rendering",{"name":247,"value":248},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":250,"value":251},"Что в браузере блокирует рендеринг страницы?","what-is-blocking-the-page-rendering-in-the-browser",{"name":253,"value":254},"Что такое DOM в браузере? Что такое CSSOM?","what-is-dom-in-a-browser-what-is-cssom",{"name":256,"value":257},"Что является узлами в DOM?","what-are-nodes-in-the-dom",{"name":259,"value":260},"Из чего состоит CSSOM?","what-does-cssom-consist-of",{"name":262,"value":263},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":265,"value":266},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":268,"value":269},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":271,"value":272},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":274,"value":275},"Есть HTML код. Будет ли font-weight на span влиять?","there-is-an-html-code-will-font-weight-affect-span",{"name":277,"value":278},"Flexbox и Grid, чем отличаются друг от друга?","what-are-the-differences-between-flexbox-and-grid",{"name":280,"value":281},"Заменяют ли Flexbox и Grid друг друга?","do-flexbox-and-grid-replace-each-other",{"name":283,"value":284},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":286,"value":287},"Сборник задач","tasks",{"name":289,"value":290},"Какие способы объявления функции есть в JavaScript?","what-are-the-ways-to-declare-a-function-in-javascript",{"name":292,"value":293},"Что такое this в JavaScript?","what-is-this-in-javascript",{"name":295,"value":296},"Что такое Event Loop, как работает?","what-is-an-event-loop-and-how-does-it-work",{"name":298,"value":299},"Что будет, если вызвать typeof на необъявленной переменной?","what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":301,"value":302},"Что показывает оператор typeof в JavaScript?","what-does-the-typeof-operator-show-in-javascript",{"name":304,"value":305},"Какие типы данных существует в JavaScript?","what-types-of-data-exist-in-javascript",{"name":307,"value":308},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":310,"value":311},"Что вернет typeof для массива?","what-will-typeof-return-for-an-array",{"name":313,"value":314},"Почему оператор typeof, применённый к массиву, возвращает объект?","why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":316,"value":317},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":319,"value":320},"Что возвращает typeof для new Set в JavaScript?","what-does-typeof-return-for-new-set-in-javascript",{"name":322,"value":323},"Для чего нужен React, какие он решает проблемы?","what-is-react-used-for-and-what-problems-does-it-solve",{"name":325,"value":326},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":328,"value":329},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":331,"value":332},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":334,"value":335},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":337,"value":338},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":340,"value":341},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":343,"value":344},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":346,"value":347},"Какие существуют стратегии ветвления для работы команды? Что это такое?","what-are-the-branching-strategies-for-the-team-what-is-it",{"name":349,"value":350},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":352,"value":353},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":355,"value":356},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":358,"value":359},"Что такое алгоритмическая сложность?","what-is-algorithmic-complexity",{"name":361,"value":362},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","what-is-the-algorithmic-complexity-of-quick-sort",{"name":364,"value":365},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":367,"value":368},"Каким способом может выполняться авторизация пользователя на сайте?","how-can-a-user-be-authorized-on-a-website",{"name":370,"value":371},"В чем разница между микро- и макро-тасками в JavaScript?","what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":373,"value":374},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":376,"value":377},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":379,"value":380},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":382,"value":383},"Подготовка к тех.интервью","technical-interview",{"name":385,"value":386},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":388,"value":389},"Что такое DNS, как DNS находит нужный IP-адрес?","what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":391,"value":392},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","variables-are-declared-as-follows-specify-the-correct-statement",{"name":394,"value":395},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":397,"value":398},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",[400],{"label":382,"slug":383,"to":401},"/technical-interview/where-to-begin",{"navigationList":403,"navigationSublist":409},[404,406],{"path":401,"isActive":49,"name":82,"icon":405,"isNavbarMobileDisabled":8},"material-symbols:visibility-outline-rounded",{"path":407,"isActive":8,"name":286,"icon":408,"isNavbarMobileDisabled":49},"/technical-interview/tasks","material-symbols:task-outline",[410,417,436,445,450,545,562,569,574,617,632,637],{"title":411,"list":412,"isOpened":49},"Bash",[413,415],{"name":352,"path":414,"isActive":49},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":355,"path":416,"isActive":49},"/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":418,"list":419,"isOpened":49},"CSS",[420,422,424,426,428,430,432,434],{"name":262,"path":421,"isActive":49},"/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":265,"path":423,"isActive":49},"/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":268,"path":425,"isActive":49},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":271,"path":427,"isActive":49},"/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":274,"path":429,"isActive":49},"/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":277,"path":431,"isActive":49},"/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":280,"path":433,"isActive":49},"/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":283,"path":435,"isActive":49},"/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":437,"list":438,"isOpened":49},"Git",[439,441,443],{"name":340,"path":440,"isActive":49},"/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":343,"path":442,"isActive":49},"/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":346,"path":444,"isActive":49},"/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":446,"list":447,"isOpened":49},"HTML",[448],{"name":211,"path":449,"isActive":49},"/technical-interview/tasks/what-is-html",{"title":451,"list":452,"isOpened":49},"JavaScript",[453,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483,485,487,489,491,493,495,497,499,501,503,505,507,509,511,513,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543],{"name":94,"path":454,"isActive":49},"/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":85,"path":456,"isActive":49},"/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":232,"path":458,"isActive":49},"/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":115,"path":460,"isActive":49},"/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":118,"path":462,"isActive":49},"/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":154,"path":464,"isActive":49},"/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":157,"path":466,"isActive":49},"/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":172,"path":468,"isActive":49},"/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":391,"path":470,"isActive":49},"/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":178,"path":472,"isActive":49},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":160,"path":474,"isActive":49},"/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":163,"path":476,"isActive":49},"/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":79,"path":478,"isActive":49},"/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":181,"path":480,"isActive":49},"/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":289,"path":482,"isActive":49},"/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":292,"path":484,"isActive":49},"/technical-interview/tasks/what-is-this-in-javascript",{"name":295,"path":486,"isActive":49},"/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":298,"path":488,"isActive":49},"/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":301,"path":490,"isActive":49},"/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":304,"path":492,"isActive":49},"/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":307,"path":494,"isActive":49},"/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":310,"path":496,"isActive":49},"/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":313,"path":498,"isActive":49},"/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":316,"path":500,"isActive":49},"/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":319,"path":502,"isActive":49},"/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":364,"path":504,"isActive":49},"/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":370,"path":506,"isActive":49},"/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":103,"path":508,"isActive":49},"/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":121,"path":510,"isActive":49},"/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":106,"path":512,"isActive":49},"/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":136,"path":514,"isActive":49},"/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":112,"path":516,"isActive":49},"/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":139,"path":518,"isActive":49},"/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":130,"path":520,"isActive":49},"/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":142,"path":522,"isActive":49},"/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":148,"path":524,"isActive":49},"/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":100,"path":526,"isActive":49},"/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":151,"path":528,"isActive":49},"/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":124,"path":530,"isActive":49},"/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":97,"path":532,"isActive":49},"/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":127,"path":534,"isActive":49},"/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":169,"path":536,"isActive":49},"/technical-interview/tasks/flattening-the-array",{"name":133,"path":538,"isActive":49},"/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":175,"path":540,"isActive":49},"/technical-interview/tasks/string-compression",{"name":166,"path":542,"isActive":49},"/technical-interview/tasks/unifying-values-in-an-array",{"name":145,"path":544,"isActive":49},"/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":546,"list":547,"isOpened":49},"React",[548,550,552,554,556,558,560],{"name":322,"path":549,"isActive":49},"/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":394,"path":551,"isActive":49},"/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":325,"path":553,"isActive":49},"/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":328,"path":555,"isActive":49},"/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":331,"path":557,"isActive":49},"/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":334,"path":559,"isActive":49},"/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":397,"path":561,"isActive":49},"/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":563,"list":564,"isOpened":49},"Алгоритмы",[565,567],{"name":358,"path":566,"isActive":49},"/technical-interview/tasks/what-is-algorithmic-complexity",{"name":361,"path":568,"isActive":49},"/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":570,"list":571,"isOpened":49},"Дебаггинг",[572],{"name":337,"path":573,"isActive":49},"/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":575,"list":576,"isOpened":49},"Компьютерные сети",[577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615],{"name":184,"path":578,"isActive":49},"/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":388,"path":580,"isActive":49},"/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":187,"path":582,"isActive":49},"/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":190,"path":584,"isActive":49},"/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":193,"path":586,"isActive":49},"/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":196,"path":588,"isActive":49},"/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":199,"path":590,"isActive":49},"/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":202,"path":592,"isActive":49},"/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":205,"path":594,"isActive":49},"/technical-interview/tasks/what-are-http-parameters",{"name":208,"path":596,"isActive":49},"/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":214,"path":598,"isActive":49},"/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":217,"path":600,"isActive":49},"/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":220,"path":602,"isActive":49},"/technical-interview/tasks/what-is-a-cookie",{"name":223,"path":604,"isActive":49},"/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":226,"path":606,"isActive":49},"/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":385,"path":608,"isActive":49},"/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":235,"path":610,"isActive":49},"/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":238,"path":612,"isActive":49},"/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":241,"path":614,"isActive":49},"/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":367,"path":616,"isActive":49},"/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":618,"list":619,"isOpened":49},"Отрисовка в браузере",[620,622,624,626,628,630],{"name":247,"path":621,"isActive":49},"/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":244,"path":623,"isActive":49},"/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":250,"path":625,"isActive":49},"/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":253,"path":627,"isActive":49},"/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":256,"path":629,"isActive":49},"/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":259,"path":631,"isActive":49},"/technical-interview/tasks/what-does-cssom-consist-of",{"title":633,"list":634,"isOpened":49},"Ревью кода",[635],{"name":349,"path":636,"isActive":49},"/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":638,"list":639,"isOpened":49},"Теория вероятности",[640,642,644],{"name":373,"path":641,"isActive":49},"/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":376,"path":643,"isActive":49},"/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":379,"path":645,"isActive":49},"/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"cooperation":647,"copyright":650,"reportError":651,"socialNetwork":653},{"link":648,"title":649},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":652,"link":648},"Сообщить об ошибке",{"label":654,"socialNetworkList":655},"Мы в соцсетях:",[656,659,662],{"icon":19,"link":657,"title":658},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":660,"link":648,"title":661},"ic:baseline-telegram","Telegram",{"icon":663,"link":664,"title":665},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":667,"body":668},{},{"type":669,"children":670},"root",[671,679,692],{"type":672,"tag":673,"props":674,"children":675},"element","p",{},[676],{"type":677,"value":678},"text","Есть шаблон HTML и CSS кода:",{"type":672,"tag":680,"props":681,"children":685},"pre",{"className":682,"code":684,"language":677},[683],"language-text","\u003Chtml>\n    \u003Chead>\n        \u003Cstyle>\n        #element {\n            color: red;\n        }\n\n        .element {\n            color: blue;\n        }\n\n        div.element {\n            color: yellow;\n        }\n\n        div.element {\n            color: magenta;\n        }\n        \n        div.element {\n            color: magenta;\n        }\n\n        div.element {\n            color: magenta;\n        }\n\n        div.element {\n            color: magenta;\n        }\n        \u003C/style>\n    \u003C/head>\n\u003Cbody>\n    \u003Cdiv id=\"element\" class=\"element\">\n        Таким образом, постоянное\n    \u003C/div>\n\u003C/body>\n\u003C/html>\n",[686],{"type":672,"tag":687,"props":688,"children":690},"code",{"__ignoreMap":689},"",[691],{"type":677,"value":684},{"type":672,"tag":673,"props":693,"children":694},{},[695],{"type":677,"value":696},"Какой будет цвет у текста «Таким образом, постоянное»?",{"data":698,"body":699},{},{"type":669,"children":700},[701],{"type":672,"tag":673,"props":702,"children":703},{},[704],{"type":677,"value":52},{"data":706,"body":707},{},{"type":669,"children":708},[709],{"type":672,"tag":673,"props":710,"children":711},{},[712],{"type":677,"value":45},{"data":714,"body":715},{},{"type":669,"children":716},[717],{"type":672,"tag":673,"props":718,"children":719},{},[720],{"type":677,"value":48},{"data":722,"body":723},{},{"type":669,"children":724},[725],{"type":672,"tag":673,"props":726,"children":727},{},[728],{"type":677,"value":55},{"data":730,"body":731},{},{"type":669,"children":732},[733],{"type":672,"tag":673,"props":734,"children":735},{},[736,738,744],{"type":677,"value":737},"Необходимо выписать все подходящие селекторы, посчитать их специфичность как ",{"type":672,"tag":687,"props":739,"children":741},{"className":740},[],[742],{"type":677,"value":743},"ID-CLASS-TYPE",{"type":677,"value":745},", затем помнить, что порядок «кто ниже в CSS» важен только при равной специфичности.",{"data":747,"body":748},{},{"type":669,"children":749},[750],{"type":672,"tag":673,"props":751,"children":752},{},[753,759],{"type":672,"tag":754,"props":755,"children":756},"strong",{},[757],{"type":677,"value":758},"Правильный ответ: 1",{"type":677,"value":760}," - red",{"data":762,"body":763},{},{"type":669,"children":764},[765,854],{"type":672,"tag":673,"props":766,"children":767},{},[768,770,776,778,784,786,792,794,800,802,808,809,815,817,821,823,826,828,833,835,840,841,846,848,853],{"type":677,"value":769},"Рассматриваемый элемент — это ",{"type":672,"tag":687,"props":771,"children":773},{"className":772},[],[774],{"type":677,"value":775},"div",{"type":677,"value":777}," с атрибутами ",{"type":672,"tag":687,"props":779,"children":781},{"className":780},[],[782],{"type":677,"value":783},"id=\"element\"",{"type":677,"value":785}," и ",{"type":672,"tag":687,"props":787,"children":789},{"className":788},[],[790],{"type":677,"value":791},"class=\"element\"",{"type":677,"value":793},", значит одновременно подходят селекторы ",{"type":672,"tag":687,"props":795,"children":797},{"className":796},[],[798],{"type":677,"value":799},"#element",{"type":677,"value":801},", ",{"type":672,"tag":687,"props":803,"children":805},{"className":804},[],[806],{"type":677,"value":807},".element",{"type":677,"value":785},{"type":672,"tag":687,"props":810,"children":812},{"className":811},[],[813],{"type":677,"value":814},"div.element",{"type":677,"value":816},".",{"type":672,"tag":818,"props":819,"children":820},"br",{},[],{"type":677,"value":822},"\nСреди подходящих правил выбирается то, у которого выше специфичность селектора; при разных специфичностях порядок в CSS (кто ниже написан) не меняет победителя.",{"type":672,"tag":818,"props":824,"children":825},{},[],{"type":677,"value":827},"\nУ ",{"type":672,"tag":687,"props":829,"children":831},{"className":830},[],[832],{"type":677,"value":799},{"type":677,"value":834}," специфичность выше, чем у ",{"type":672,"tag":687,"props":836,"children":838},{"className":837},[],[839],{"type":677,"value":807},{"type":677,"value":785},{"type":672,"tag":687,"props":842,"children":844},{"className":843},[],[845],{"type":677,"value":814},{"type":677,"value":847},", поэтому итоговый цвет текста будет ",{"type":672,"tag":687,"props":849,"children":851},{"className":850},[],[852],{"type":677,"value":45},{"type":677,"value":816},{"type":672,"tag":680,"props":855,"children":858},{"className":856,"code":857,"language":677},[683],"\u003Cdiv id=\"element\" class=\"element\">\n    Таким образом, постоянное\n\u003C/div>\n",[859],{"type":672,"tag":687,"props":860,"children":861},{"__ignoreMap":689},[862],{"type":677,"value":857},{"data":864,"body":865},{},{"type":669,"children":866},[867],{"type":672,"tag":673,"props":868,"children":869},{},[870,872,877,879,884,886,891],{"type":677,"value":871},"Повторяющиеся правила ",{"type":672,"tag":687,"props":873,"children":875},{"className":874},[],[876],{"type":677,"value":814},{"type":677,"value":878}," действительно конфликтуют между собой, но они «соревнуются» только внутри своей группы одинаковой специфичности и не могут обойти правило с ",{"type":672,"tag":687,"props":880,"children":882},{"className":881},[],[883],{"type":677,"value":799},{"type":677,"value":885},", потому что у ",{"type":672,"tag":687,"props":887,"children":889},{"className":888},[],[890],{"type":677,"value":799},{"type":677,"value":892}," выше специфичность.",{"data":894,"body":895},{},{"type":669,"children":896},[897,946,951,1086,1112],{"type":672,"tag":673,"props":898,"children":899},{},[900,902,905,907,913,915,921,923,929,930,936,938,944],{"type":677,"value":901},"Специфичность — это правило приоритета, по которому браузер определяет «вес» селектора и выбирает, какое значение свойства применить при конкурирующих правилах.",{"type":672,"tag":818,"props":903,"children":904},{},[],{"type":677,"value":906},"\nВ учебной форме специфичность удобно считать как тройку ",{"type":672,"tag":687,"props":908,"children":910},{"className":909},[],[911],{"type":677,"value":912},"ID - CLASS - TYPE",{"type":677,"value":914},", где ",{"type":672,"tag":687,"props":916,"children":918},{"className":917},[],[919],{"type":677,"value":920},"ID",{"type":677,"value":922}," — количество ",{"type":672,"tag":687,"props":924,"children":926},{"className":925},[],[927],{"type":677,"value":928},"#id",{"type":677,"value":801},{"type":672,"tag":687,"props":931,"children":933},{"className":932},[],[934],{"type":677,"value":935},"CLASS",{"type":677,"value":937}," — количество классов/атрибутов/псевдоклассов, ",{"type":672,"tag":687,"props":939,"children":941},{"className":940},[],[942],{"type":677,"value":943},"TYPE",{"type":677,"value":945}," — количество селекторов по тегу и псевдоэлементов.",{"type":672,"tag":673,"props":947,"children":948},{},[949],{"type":677,"value":950},"Таблица специфичности для данной задачи:",{"type":672,"tag":952,"props":953,"children":954},"table",{},[955,985],{"type":672,"tag":956,"props":957,"children":958},"thead",{},[959],{"type":672,"tag":960,"props":961,"children":962},"tr",{},[963,969,974,980],{"type":672,"tag":964,"props":965,"children":966},"th",{},[967],{"type":677,"value":968},"Селектор",{"type":672,"tag":964,"props":970,"children":971},{},[972],{"type":677,"value":973},"Что выбирает",{"type":672,"tag":964,"props":975,"children":977},{"align":976},"right",[978],{"type":677,"value":979},"Специфичность (ID-CLASS-TYPE)",{"type":672,"tag":964,"props":981,"children":982},{},[983],{"type":677,"value":984},"Цвет из правила",{"type":672,"tag":986,"props":987,"children":988},"tbody",{},[989,1020,1050],{"type":672,"tag":960,"props":990,"children":991},{},[992,1001,1011,1016],{"type":672,"tag":993,"props":994,"children":995},"td",{},[996],{"type":672,"tag":687,"props":997,"children":999},{"className":998},[],[1000],{"type":677,"value":799},{"type":672,"tag":993,"props":1002,"children":1003},{},[1004,1006],{"type":677,"value":1005},"элемент с ",{"type":672,"tag":687,"props":1007,"children":1009},{"className":1008},[],[1010],{"type":677,"value":783},{"type":672,"tag":993,"props":1012,"children":1013},{"align":976},[1014],{"type":677,"value":1015},"1-0-0",{"type":672,"tag":993,"props":1017,"children":1018},{},[1019],{"type":677,"value":45},{"type":672,"tag":960,"props":1021,"children":1022},{},[1023,1031,1041,1046],{"type":672,"tag":993,"props":1024,"children":1025},{},[1026],{"type":672,"tag":687,"props":1027,"children":1029},{"className":1028},[],[1030],{"type":677,"value":807},{"type":672,"tag":993,"props":1032,"children":1033},{},[1034,1036],{"type":677,"value":1035},"элементы с ",{"type":672,"tag":687,"props":1037,"children":1039},{"className":1038},[],[1040],{"type":677,"value":791},{"type":672,"tag":993,"props":1042,"children":1043},{"align":976},[1044],{"type":677,"value":1045},"0-1-0",{"type":672,"tag":993,"props":1047,"children":1048},{},[1049],{"type":677,"value":48},{"type":672,"tag":960,"props":1051,"children":1052},{},[1053,1061,1076,1081],{"type":672,"tag":993,"props":1054,"children":1055},{},[1056],{"type":672,"tag":687,"props":1057,"children":1059},{"className":1058},[],[1060],{"type":677,"value":814},{"type":672,"tag":993,"props":1062,"children":1063},{},[1064,1069,1071],{"type":672,"tag":687,"props":1065,"children":1067},{"className":1066},[],[1068],{"type":677,"value":775},{"type":677,"value":1070}," с ",{"type":672,"tag":687,"props":1072,"children":1074},{"className":1073},[],[1075],{"type":677,"value":791},{"type":672,"tag":993,"props":1077,"children":1078},{"align":976},[1079],{"type":677,"value":1080},"0-1-1",{"type":672,"tag":993,"props":1082,"children":1083},{},[1084],{"type":677,"value":1085},"yellow / magenta (зависит от порядка)",{"type":672,"tag":673,"props":1087,"children":1088},{},[1089,1091,1096,1098,1103,1105,1110],{"type":677,"value":1090},"Ключевое сравнение: ",{"type":672,"tag":687,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":677,"value":1015},{"type":677,"value":1097}," (ID) «старше», чем ",{"type":672,"tag":687,"props":1099,"children":1101},{"className":1100},[],[1102],{"type":677,"value":1080},{"type":677,"value":1104}," (класс + тег), потому что сравнение идёт слева направо, и более высокий разряд ",{"type":672,"tag":687,"props":1106,"children":1108},{"className":1107},[],[1109],{"type":677,"value":920},{"type":677,"value":1111}," побеждает независимо от остальных.",{"type":672,"tag":680,"props":1113,"children":1116},{"className":1114,"code":1115,"language":677},[683],"/* Специфичность (ID-CLASS-TYPE) */\n#element      { color: red;     } /* 1-0-0 */\n.element      { color: blue;    } /* 0-1-0 */\ndiv.element   { color: yellow;  } /* 0-1-1 */\ndiv.element   { color: magenta; } /* 0-1-1 (то же самое) */\ndiv.element   { color: magenta; } /* 0-1-1 */\ndiv.element   { color: magenta; } /* 0-1-1 */\ndiv.element   { color: magenta; } /* 0-1-1 */\n",[1117],{"type":672,"tag":687,"props":1118,"children":1119},{"__ignoreMap":689},[1120],{"type":677,"value":1115},{"data":1122,"body":1123},{},{"type":669,"children":1124},[1125],{"type":672,"tag":673,"props":1126,"children":1127},{},[1128,1130,1135,1137,1142,1144,1149,1151,1157],{"type":677,"value":1129},"Селекторы с ",{"type":672,"tag":687,"props":1131,"children":1133},{"className":1132},[],[1134],{"type":677,"value":928},{"type":677,"value":1136}," часто делают переопределения сложнее: чтобы «перебить» ",{"type":672,"tag":687,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":677,"value":928},{"type":677,"value":1143},", обычно требуется либо другой ",{"type":672,"tag":687,"props":1145,"children":1147},{"className":1146},[],[1148],{"type":677,"value":928},{"type":677,"value":1150}," (или несколько), либо ",{"type":672,"tag":687,"props":1152,"children":1154},{"className":1153},[],[1155],{"type":677,"value":1156},"!important",{"type":677,"value":1158},", а это ухудшает поддерживаемость стилей.",{"data":1160,"body":1161},{},{"type":669,"children":1162},[1163,1188,1193,1278,1283],{"type":672,"tag":673,"props":1164,"children":1165},{},[1166,1168,1173,1175,1178,1180,1186],{"type":677,"value":1167},"Каскад — это общий механизм выбора значений CSS-свойств (кто «победит» при конкурирующих стилях), где учитываются важность (",{"type":672,"tag":687,"props":1169,"children":1171},{"className":1170},[],[1172],{"type":677,"value":1156},{"type":677,"value":1174},"), происхождение стилей и другие шаги; специфичность — один из ключевых шагов этого механизма.",{"type":672,"tag":818,"props":1176,"children":1177},{},[],{"type":677,"value":1179},"\nЕсли конкурирующие правила находятся в одном месте (например, в одном блоке ",{"type":672,"tag":687,"props":1181,"children":1183},{"className":1182},[],[1184],{"type":677,"value":1185},"\u003Cstyle>",{"type":677,"value":1187},") и имеют одинаковую специфичность, применяется правило, объявленное позже (ниже по коду).",{"type":672,"tag":673,"props":1189,"children":1190},{},[1191],{"type":677,"value":1192},"В данной задаче важно разделить два конфликта:",{"type":672,"tag":1194,"props":1195,"children":1196},"ol",{},[1197,1235],{"type":672,"tag":1198,"props":1199,"children":1200},"li",{},[1201,1203,1209,1211,1217,1220,1222,1227,1229,1234],{"type":677,"value":1202},"Конфликт между ",{"type":672,"tag":687,"props":1204,"children":1206},{"className":1205},[],[1207],{"type":677,"value":1208},"div.element { color: yellow; }",{"type":677,"value":1210}," и последующими ",{"type":672,"tag":687,"props":1212,"children":1214},{"className":1213},[],[1215],{"type":677,"value":1216},"div.element { color: magenta; }",{"type":672,"tag":818,"props":1218,"children":1219},{},[],{"type":677,"value":1221},"\nУ них одинаковая специфичность ",{"type":672,"tag":687,"props":1223,"children":1225},{"className":1224},[],[1226],{"type":677,"value":1080},{"type":677,"value":1228},", поэтому среди них победит самое последнее по порядку — ",{"type":672,"tag":687,"props":1230,"children":1232},{"className":1231},[],[1233],{"type":677,"value":55},{"type":677,"value":816},{"type":672,"tag":1198,"props":1236,"children":1237},{},[1238,1240,1245,1247,1253,1256,1257,1262,1264,1269,1271,1276],{"type":677,"value":1239},"Конфликт между победителем из группы ",{"type":672,"tag":687,"props":1241,"children":1243},{"className":1242},[],[1244],{"type":677,"value":814},{"type":677,"value":1246}," и правилом ",{"type":672,"tag":687,"props":1248,"children":1250},{"className":1249},[],[1251],{"type":677,"value":1252},"#element { color: red; }",{"type":672,"tag":818,"props":1254,"children":1255},{},[],{"type":677,"value":827},{"type":672,"tag":687,"props":1258,"children":1260},{"className":1259},[],[1261],{"type":677,"value":799},{"type":677,"value":1263}," специфичность ",{"type":672,"tag":687,"props":1265,"children":1267},{"className":1266},[],[1268],{"type":677,"value":1015},{"type":677,"value":1270},", она выше, значит итоговый цвет становится ",{"type":672,"tag":687,"props":1272,"children":1274},{"className":1273},[],[1275],{"type":677,"value":45},{"type":677,"value":1277},", даже если ниже в CSS написаны другие правила с меньшей специфичностью.",{"type":672,"tag":673,"props":1279,"children":1280},{},[1281],{"type":677,"value":1282},"Небольшая схема принятия решения для этого примера:",{"type":672,"tag":680,"props":1284,"children":1287},{"className":1285,"code":1286,"language":677},[683],"Шаг 1. Найти все правила, которые подходят элементу:\n- #element\n- .element\n- div.element (несколько раз)\n\nШаг 2. Сравнить специфичность:\n- #element     -> 1-0-0  (самая высокая)\n- div.element  -> 0-1-1\n- .element     -> 0-1-0\n\nШаг 3. Выбрать самое специфичное:\n- Побеждает #element -> color: red\n",[1288],{"type":672,"tag":687,"props":1289,"children":1290},{"__ignoreMap":689},[1291],{"type":677,"value":1286},{"data":1293,"body":1294},{},{"type":669,"children":1295},[1296],{"type":672,"tag":673,"props":1297,"children":1298},{},[1299,1301,1306,1307,1312,1313,1318,1320,1325,1327,1332],{"type":677,"value":1300},"Кратко: элемент подходит под ",{"type":672,"tag":687,"props":1302,"children":1304},{"className":1303},[],[1305],{"type":677,"value":799},{"type":677,"value":801},{"type":672,"tag":687,"props":1308,"children":1310},{"className":1309},[],[1311],{"type":677,"value":807},{"type":677,"value":785},{"type":672,"tag":687,"props":1314,"children":1316},{"className":1315},[],[1317],{"type":677,"value":814},{"type":677,"value":1319},", но правило ",{"type":672,"tag":687,"props":1321,"children":1323},{"className":1322},[],[1324],{"type":677,"value":1252},{"type":677,"value":1326}," имеет наибольшую специфичность, поэтому текст будет красным (",{"type":672,"tag":687,"props":1328,"children":1330},{"className":1329},[],[1331],{"type":677,"value":45},{"type":677,"value":1333},").",1775735655417]