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