{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Веб-разработка и анализ страниц зачастую требуют внимательного изучения структуры HTML/CSS, чтобы находить и модифицировать элементы по мере необходимости. Эта статья предлагает полный обзор методов, способов и инструментов, доступных разработчикам для поиска элементов на веб-страницах.","type":"unstyled","key":"5qug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если статья заинтересовала просим дать обратную реакцию, включая подписку на канал, будем очень признательны.","type":"blockquote","key":"6etsi"},{"data":{"image":{"id":"66ec0beaa2642e40565e925b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск элементов на веб-странице","type":"atomic:image","key":"e0l1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты разработчика","type":"header-two","key":"6vh5m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты разработчика (DevTools) — это встроенные инструменты в большинстве современных веб-браузеров. Для доступа к ним можно воспользоваться следующими методами:","type":"unstyled","key":"559mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Правый клик на странице: Нажмите правую кнопку мыши на любом элементе страницы и выберите «Просмотреть код» или «Инспектировать элемент» (Inspect).","type":"ordered-list-item","key":"dlnqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Клавиатурные сокращения:","type":"unstyled","key":"4tok5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте подробнее рассмотрим, как открывать инструменты разработчика в популярных браузерах, включая несколько дополнительных шагов и полезные факты о каждом из них.","type":"unstyled","key":"8j2eg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Google Chrome","type":"header-three","key":"cg5mt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Открытие инструментов разработчика:","type":"unstyled","key":"5saus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"},{"length":21,"offset":41,"style":"BOLD"},{"length":16,"offset":71,"style":"BOLD"}],"text":"Клавиатурные сокращения:Windows: Нажмите Ctrl + Shift + I\nMac: Нажмите Cmd + Option + I","type":"unordered-list-item","key":"3pv4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Правый клик:На любой части страницы нажмите правую кнопку мыши и выберите \"Просмотреть код\" или \"Инспектировать элемент\".","type":"unordered-list-item","key":"33d8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Меню браузера:Нажмите на три точки в верхнем правом углу окна браузера.\nВыберите \"Дополнительные инструменты\" (More tools).\nВыберите \"Инструменты разработчика\" (Developer tools).","type":"unordered-list-item","key":"co22r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Mozilla Firefox","type":"header-three","key":"a1m1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Открытие инструментов разработчика:","type":"unstyled","key":"8iu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"},{"length":21,"offset":41,"style":"BOLD"},{"length":16,"offset":71,"style":"BOLD"}],"text":"Клавиатурные сокращения:Windows: Нажмите Ctrl + Shift + I\nMac: Нажмите Cmd + Option + I","type":"unordered-list-item","key":"95n26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Правый клик:На любой части страницы нажмите правую кнопку мыши и выберите \"Просмотреть код\" или \"Инспектировать элемент\".","type":"unordered-list-item","key":"bag2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Меню браузера:Нажмите на три горизонтальные линии в верхнем правом углу (открывает меню).\nВыберите \"Веб-разработка\" (Web Developer).\nНажмите \"Инструменты разработчика\" (Developer Tools).","type":"unordered-list-item","key":"8ej67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Microsoft Edge","type":"header-three","key":"ekomp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Открытие инструментов разработчика:","type":"unstyled","key":"ckbth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"},{"length":3,"offset":32,"style":"BOLD"},{"length":16,"offset":40,"style":"BOLD"}],"text":"Клавиатурные сокращения:Нажмите F12 или Ctrl + Shift + I для Windows.","type":"unordered-list-item","key":"5q0t0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Правый клик:Как и в других браузерах, просто щелкните правой кнопкой мыши и выберите \"Просмотреть код\" или \"Инспектировать элемент\".","type":"unordered-list-item","key":"bqkd2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Меню браузера:Нажмите на три точки в верхнем правом углу.\nВыберите \"Дополнительные инструменты\" (More tools).\nНажмите \"Инструменты разработчика\" (Developer tools).","type":"unordered-list-item","key":"ahiac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Safari","type":"header-three","key":"91ri3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":0,"style":"BOLD"}],"text":"Открытие инструментов разработчика:","type":"unstyled","key":"dnf99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед тем как использовать инструменты разработчика в Safari, вам нужно включить их в настройках:","type":"unstyled","key":"8qj93"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Включение меню разработчика:Откройте Safari.\nПерейдите в меню \"Safari\" в верхнем левом углу и выберите \"Настройки\" (Preferences).\nПерейдите на вкладку \"Дополнительно\" (Advanced).\nУбедитесь, что установлен флажок \"Показать меню разработки в строке меню\" (Show Develop menu in menu bar).","type":"ordered-list-item","key":"bb0un"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"Теперь для открытия инструментов разработчика:","type":"unstyled","key":"5ifs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"},{"length":16,"offset":32,"style":"BOLD"}],"text":"Клавиатурные сокращения:Нажмите Cmd + Option + I.","type":"unordered-list-item","key":"6e86t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Правый клик:Щелкните правой кнопкой мыши на странице и выберите \"Просмотреть код\" или \"Инспектировать элемент\".","type":"unordered-list-item","key":"98nbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Меню браузера:Выберите \"Разработка\" (Develop) в верхнем меню.\nНажмите \"Показать инструменты разработчика\" (Show Web Inspector).","type":"unordered-list-item","key":"a8uk2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"4. Открытие инструментов разработчика в Яндекс.Браузере","type":"header-three","key":"1usij"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Яндекс.Браузер основан на движке Chromium, поэтому многие его функции и сочетания клавиш схожи с Google Chrome. Инструменты разработчика в Яндекс.Браузере также доступны через клавиатурные сокращения и меню. Вот подробная информация о том, как их открыть и использовать:","type":"unstyled","key":"9960q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Клавиатурные сокращения","type":"header-three","key":"9t938"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":16,"offset":17,"style":"BOLD"}],"text":"Windows: Нажмите Ctrl + Shift + I","type":"unordered-list-item","key":"50o0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":16,"offset":13,"style":"BOLD"}],"text":"Mac: Нажмите Cmd + Option + I","type":"unordered-list-item","key":"ekesi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Правый клик","type":"header-three","key":"ejr2m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Щелкните правой кнопкой мыши на любой части веб-страницы и выберите \"Просмотреть код\" или \"Инспектировать элемент\".","type":"unordered-list-item","key":"5q7r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Меню браузера","type":"header-three","key":"21d5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нажмите на три горизонтальные линии в верхнем правом углу окна браузера (или на иконку \"Меню\").","type":"ordered-list-item","key":"65ioi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдите в раздел \"Дополнительные инструменты\".","type":"ordered-list-item","key":"4kf0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выберите \"Инструменты разработчика\".","type":"ordered-list-item","key":"4jnl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полезные советы","type":"header-three","key":"8del3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"Разные режимы инструментов разработчика: Во всех браузерах можно переключаться между различными режимами, такими как мобильный или планшетный, чтобы тестировать адаптивность страницы. Обычно это делается через иконку, изображающую устройство (device toolbar), которая находится в верхней части вкладки инструментов разработчика.","type":"unordered-list-item","key":"eh0mr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Запоминание сокращений: Запомнить чаще используемые сочетания клавиш может значительно ускорить вашу работу и повысит продуктивность.","type":"unordered-list-item","key":"83t9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Многочисленные вкладки: Вы можете открывать несколько вкладок инструментов разработчика одновременно, чтобы сравнивать элементы и стили между страницами.","type":"unordered-list-item","key":"1qdnn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные разделы инструментов разработчика","type":"header-two","key":"e6r9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты разработчика обычно состоят из нескольких вкладок:","type":"unstyled","key":"3ka18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Elements (Элементы): Здесь отображается HTML-структура страницы. Вы можете просматривать и изменять HTML и CSS в реальном времени.","type":"ordered-list-item","key":"bf11g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Console (Консоль): Позволяет выполнять JavaScript-код и отлаживать скрипты.","type":"ordered-list-item","key":"92h42"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Network (Сеть): Позволяет отслеживать сетевые запросы, ответы, время загрузки и другие параметры.","type":"ordered-list-item","key":"3hgu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Sources (Источники): Дает доступ к всем файлам, загружаемым на страницу, включая скрипты и стили.","type":"ordered-list-item","key":"44hp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Application (Приложение): Предоставляет информацию о кэшах, локальном хранилище и куках.","type":"ordered-list-item","key":"aq9aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Performance (Производительность): Позволяет анализировать производительность страницы и находить узкие места.","type":"ordered-list-item","key":"1nb7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск элементов на веб-странице","type":"header-two","key":"bqm22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Использование вкладки Elements","type":"header-three","key":"9qsp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вкладка Elements позволяет вам:","type":"unstyled","key":"8780k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Навигация по элементам: Откройте элемент в структуре HTML, наведя на него курсор. Связанный элемент будет выделен на странице, что упростит его поиск.","type":"unordered-list-item","key":"70d27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Изменение стилей: В правой части вкладки Elements вы увидите стили, применяемые к выделенному элементу. Вы можете вносить изменения в CSS, чтобы немедленно увидеть результат.","type":"unordered-list-item","key":"62jlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Поиск по селекторам","type":"header-three","key":"40at2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"},{"length":8,"offset":44,"style":"BOLD"},{"length":7,"offset":58,"style":"BOLD"},{"length":3,"offset":112,"style":"BOLD"},{"length":6,"offset":137,"style":"BOLD"}],"text":"Поиск по ID или классу: Используйте команду Ctrl + F (или Cmd + F на Mac), чтобы открыть строку поиска. Введите #id для поиска по ID или .class для поиска по классу.","type":"ordered-list-item","key":"fipr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"},{"length":12,"offset":81,"style":"BOLD"},{"length":5,"offset":110,"style":"BOLD"}],"text":"Селекторы: Вы можете использовать более сложные CSS-селекторы. Например, введите div > .class для поиска всех

, содержащих элемент с данными классами.","type":"ordered-list-item","key":"3r5nf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Селекторы в CSS — это мощный инструмент для выбора элементов на веб-странице. Давайте разберем основные типы селекторов и их особенности.","type":"unstyled","key":"3bgpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":"A. Селекторы по тегам (Type Selectors)","type":"header-three","key":"3mhr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы по их тегу.","type":"unstyled","key":"2l4j6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p {\ncolor: blue; /* Все элементы

будут синими */\n}","type":"blockquote","key":"61sot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":3,"style":"BOLD"}],"text":"B. Селекторы по классам (Class Selectors)","type":"header-three","key":"fah3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы с определенным классом. Классы обозначаются точкой (.)","type":"unstyled","key":"4ilbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".example {\n font-size: 16px; /* Все элементы с классом \"example\" */\n}","type":"blockquote","key":"275jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":3,"style":"BOLD"}],"text":"C. Селекторы по идентификаторам (ID Selectors)","type":"header-three","key":"be9qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы с определенным идентификатором. Идентификаторы обозначаются решеткой (#)","type":"unstyled","key":"dfu56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#unique {\n background-color: yellow; /* Элемент с id \"unique\" */\n}","type":"blockquote","key":"aa438"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":3,"style":"BOLD"}],"text":"D. Селекторы атрибутов (Attribute Selectors)","type":"header-three","key":"bpntc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы на основе наличия или значения атрибутов.","type":"unstyled","key":"e54c3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"По наличию атрибута:","type":"unstyled","key":"7ucc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type] {\n border: 1px solid black; /* Все с любым атрибутом \"type\" */\n}","type":"blockquote","key":"6ts7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"По значению атрибута:","type":"unstyled","key":"cu6if"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"input[type=\"text\"] {\n color: green; /* с атрибутом type=\"text\" */\n}","type":"blockquote","key":"c9r0g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":3,"style":"BOLD"}],"text":"E. Селекторы потомков (Descendant Selectors)","type":"header-three","key":"cbuql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы, которые являются потомками других элементов.","type":"unstyled","key":"c8s4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div p {\n margin: 10px; /* Все

внутри

*/\n}","type":"blockquote","key":"dkkts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":3,"style":"BOLD"}],"text":"F. Селекторы детей (Child Selectors)","type":"header-three","key":"o71l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают только непосредственных детей.","type":"unstyled","key":"aqoqt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ul > li {\n list-style-type: none; /* Только

, которые являются непосредственными детьми

, который следует сразу после

/\n}","type":"blockquote","key":"4e1jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":3,"style":"BOLD"}],"text":"H. Общие соседние селекторы (General Sibling Selectors)","type":"header-three","key":"5tcur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы, которые являются соседями, но не обязаны следовать непосредственно.","type":"unstyled","key":"b82k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1 ~ p {\n font-weight: bold; / Все
, которые являются соседями

/\n}","type":"blockquote","key":"78o4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":3,"style":"BOLD"}],"text":"I. Псевдоклассы (Pseudo-classes)","type":"header-three","key":"8hld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают элементы на основе их состояния.","type":"unstyled","key":"d6nbl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"a:hover {\n text-decoration: underline; / Ссылка при наведении /\n}\nli:first-child {\n font-weight: bold; / Первый элемент списка /\n}","type":"blockquote","key":"4klul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":3,"style":"BOLD"}],"text":"J. Псевдоэлементы (Pseudo-elements)","type":"header-three","key":"erl1e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбирают определенные части элементов.","type":"unstyled","key":"fct5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"p::first-line {\n font-size: 20px; / Первая строка
/\n}\np::before {\n content: \"Начало: \"; / Добавляет текст перед
/\n}","type":"blockquote","key":"divt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":3,"style":"BOLD"}],"text":"K. Группировка селекторов (Grouping Selectors)","type":"header-three","key":"4iiec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно группировать селекторы, чтобы применить одни и те же стили.","type":"unstyled","key":"4il8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"h1, h2, h3 {\n color: blue; / Для всех заголовков будет синий цвет /\n}","type":"blockquote","key":"7u54u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":3,"style":"BOLD"}],"text":"L. Комбинированные селекторы","type":"header-three","key":"49mej"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно комбинировать разные типы селекторов.","type":"unstyled","key":"b7vsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"div.class1 > p:first-child {\n color: green; / Первый
внутри
с классом \"class1\" /\n}","type":"blockquote","key":"2n55c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":3,"style":"BOLD"}],"text":"M. Селекторы по контексту","type":"header-three","key":"au4ba"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Селекторы могут иметь сложные комбинации:","type":"unstyled","key":"2g8e2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"section > div.class1 p:hover {\n background-color: lightgray; /
при наведении внутри
класса \"class1\", который является прямым потомком
/\n}","type":"blockquote","key":"b6eug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чек лист по селекторам. Памятка по селекторам.","type":"header-three","key":"2ua3o"},{"data":{"image":{"id":"66ebee64576d5e047e3beef4"},"images":[{"id":"66ebee64576d5e047e3beef4"},{"id":"66ebee6da0db91181c12ce77"},{"id":"66ebee743d45ac2f006743f7"}],"contents":{"66ebee64576d5e047e3beef4":"Памятка по селекторам CSS","imageId":"Памятка по селекторам CSS"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Памятка по селекторам CSS","type":"atomic:image","key":"33si5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"По тегу: ","type":"unstyled","key":"4u344"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"element","type":"blockquote","key":"5lmvo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"По классу: ","type":"unstyled","key":"fuqa9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис: .classname","type":"blockquote","key":"9fl0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"По ID: ","type":"unstyled","key":"63t9l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис: #idname","type":"blockquote","key":"b48aq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"По атрибуту: ","type":"unstyled","key":"f4603"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис:","type":"blockquote","key":"87k7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По наличию атрибута: [attribute]","type":"blockquote","key":"em72v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По значению атрибута: [attribute=value]","type":"blockquote","key":"apqi4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По частичному совпадению: [attribute=\"value\"], [attribute^=\"value\"], [attribute$=\"value\"]","type":"blockquote","key":"eo2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Потомки: ","type":"unstyled","key":"6i197"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис: ","type":"blockquote","key":"eg33q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ancestor descendant","type":"blockquote","key":"8h0c2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Дети: ","type":"unstyled","key":"bfa8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"Синтаксис:","type":"blockquote","key":"cl89d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"parent > child","type":"blockquote","key":"r5am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Сосед: ","type":"unstyled","key":"7dbnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"Синтаксис:","type":"blockquote","key":"aqi2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"preceding + following","type":"blockquote","key":"8ep9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"Соседние: ","type":"unstyled","key":"b7a2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"Синтаксис:","type":"blockquote","key":"61deu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"preceding ~ following","type":"blockquote","key":"a9o81"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Псевдоклассы: ","type":"unstyled","key":"8okuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"Синтаксис:","type":"blockquote","key":"26l5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":pseudo-class","type":"blockquote","key":"5an9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Псевдоэлементы:","type":"unstyled","key":"1jn7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"Синтаксис:","type":"blockquote","key":"1rjrc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ::pseudo-element","type":"blockquote","key":"5gn9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Группировка: ","type":"unstyled","key":"37roh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":"Синтаксис:","type":"blockquote","key":"24mdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"selector1, selector2","type":"blockquote","key":"cokt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Комбинированные селекторы:","type":"unstyled","key":"4d6p1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Синтаксис: ","type":"blockquote","key":"4td95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"(parent > child.selector), (ancestor descendant.selector)","type":"blockquote","key":"e7os3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Использование консоли","type":"header-three","key":"9oqg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Консоль предоставляет возможность поиска элементов с помощью JavaScript. Это может быть полезно для динамически созданных элементов. Вы можете использовать команды, такие как:","type":"unstyled","key":"dohfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"document.querySelector('селектор') — возвращает первый элемент, соответствующий указанному селектору.","type":"unordered-list-item","key":"7vdos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":0,"style":"BOLD"}],"text":"document.querySelectorAll('селектор') — возвращает все элементы, соответствующие селектору.","type":"unordered-list-item","key":"4oiof"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Пример:","type":"unstyled","key":"1c1ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"javascript","type":"blockquote","key":"3jk59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"let element = document.querySelector('.my-class');\nconsole.log(element);","type":"blockquote","key":"99pp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты для анализа и поиска элементов","type":"header-two","key":"c32gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Расширения для браузеров","type":"header-three","key":"6krap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Существуют различные расширения, которые могут помочь в поиске и анализе элементов:","type":"unstyled","key":"2a2b9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Web Developer: Расширение, добавляющее множество инструментов для анализа и изменения CSS, HTML и других аспектов страницы.","type":"unordered-list-item","key":"rv6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Selector Gadget: Позволяет легко находить и копировать селекторы CSS для любого элемента на странице.","type":"unordered-list-item","key":"ani6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Фреймворки и библиотеки","type":"header-three","key":"8biog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При разработке с использованием таких фреймворков, как React или Vue, есть свои инструменты для анализа:","type":"unstyled","key":"37hss"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"React Developer Tools: Позволяет исследовать структуру React-компонентов и их состояние.","type":"unordered-list-item","key":"48dhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Vue.js Devtools: Предоставляет аналогичные возможности для приложений Vue.","type":"unordered-list-item","key":"32d7u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование Selenium для поиска элементов на веб-странице.","type":"header-two","key":"fp9vl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом примере мы будем искать элементы с помощью различных типов селекторов, таких как ID, классы, имя тега, и CSS-селекторы. ","type":"unstyled","key":"1mo6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка Selenium","type":"header-three","key":"32cm8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":121,"style":"BOLD"}],"text":"Сначала убедитесь, что у вас установлена библиотека Selenium. Если нет, установите ее с помощью pip, пример выполнения в PyCharm:","type":"unstyled","key":"6inmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"pip install selenium","type":"blockquote","key":"521oi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Пример кода:","type":"unstyled","key":"an24s"},{"data":{"image":{"id":"66ec092ddf72c165d3b5f3b0"},"images":[{"id":"66ec092ddf72c165d3b5f3b0"},{"id":"66ec093611b9fb542f32ef4b"}],"contents":{"66ec092ddf72c165d3b5f3b0":"Использование Selenium для поиска элементов на веб-странице, написанный на Python.","imageId":"Использование Selenium для поиска элементов на веб-странице, написанный на Python."}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование Selenium для поиска элементов на веб-странице, написанный на Python.","type":"atomic:image","key":"d1g8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"166r5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from selenium import webdriver\nfrom selenium.webdriver.common.by import By\nfrom selenium.webdriver.common.keys import Keys\nfrom selenium.webdriver.chrome.service import Service\nimport time\n\n# Путь к драйверу\ndriver_path = r'C:\\Users\\user\\.cache\\selenium\\chromedriver\\win64\\127.0.6533.119\\chromedriver.exe'\n\n# Создаем объект Service для драйвера\nservice = Service(driver_path)\ndriver = webdriver.Chrome(service=service)\n\ntry:\n # Открываем веб-страницу\n driver.get('https://www.python.org/') # Замените на нужный URL\n\n # 1. Поиск элемента по ID\n element_by_id = driver.find_element(By.ID, 'about') # Убедитесь, что 'about' существует\n print('Элемент найден по ID:', element_by_id.text)\n\n # 2. Поиск элемента по классу\n element_by_class = driver.find_element(By.CLASS_NAME, 'python-logo') # Убедитесь, что класс правильный\n print('Элемент найден по классу:', element_by_class.text)\n\n # 3. Поиск элемента по имени тега\n element_by_tag_name = driver.find_element(By.TAG_NAME, 'h1') # Убедитесь, что существует\n print('Элемент найден по имени тега:', element_by_tag_name.text)\n\n # 4. Поиск элемента по CSS селектору\n element_by_css = driver.find_element(By.CSS_SELECTOR, '.icon-jobs') # Убедитесь, что класс существует\n print('Элемент найден по CSS селектору:', element_by_css.text)\n\n # 5. Поиск элемента по XPath\n element_by_xpath = driver.find_element(By.XPATH, '//div[@class=\"small-widget documentation-widget\"]/p') # Проверить XPath\n print('Элемент найден по XPath:', element_by_xpath.text)\n\n # 6. Демо: Ввод текста в поле ввода\n input_field = driver.find_element(By.NAME, 'q') # Используйте имя поля ввода\n input_field.send_keys('Текст для ввода') # Ввод текста\n input_field.send_keys(Keys.RETURN) # Нажимаем Enter\n\n # Подождите немного, чтобы увидеть изменения на странице\n time.sleep(3)\n\nfinally:\n # Закрываем браузер\n driver.quit()","type":"blockquote","key":"8cupf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В итоге мы получили:","type":"unstyled","key":"9dtci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"C:\\Users\\user\\PycharmProjects\\Academy\\.venv\\Scripts\\python.exe C:\\Users\\user\\Desktop\\DZ\\Selenium\\environments\\test.py \nЭлемент найден по ID: About\nЭлемент найден по классу: \nЭлемент найден по имени тега: \nЭлемент найден по CSS селектору: \nЭлемент найден по XPath: Documentation for Python's standard library, along with tutorials and guides, are available online.\n\nProcess finished with exit code 0","type":"blockquote","key":"bk2u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что делает этот код?","type":"header-three","key":"80ouq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Инициализация драйвера: Мы создаем экземпляр браузера Chrome.","type":"ordered-list-item","key":"1g9lo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Открытие веб-страницы: Загружаем нужный URL.","type":"ordered-list-item","key":"u6l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Поиск элементов: Находим элементы различными способами:По ID.\nПо классу.\nПо имени тега.\nПо CSS-селектору.\nПо XPath.\n","type":"ordered-list-item","key":"50l9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Ввод текста в поле: Находим текстовое поле по имени и вводим текст.","type":"ordered-list-item","key":"8ubel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Закрытие браузера: В конце работы мы закрываем браузер.","type":"ordered-list-item","key":"4q5cv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заметки","type":"header-three","key":"86os2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убедитесь, что у вас установлен соответствующий веб-драйвер для вашего браузера (например, ChromeDriver для Google Chrome).","type":"unordered-list-item","key":"4fn2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Измените селекторы, URL и другие параметры, чтобы они соответствовали вашим нуждам.","type":"unordered-list-item","key":"b0gce"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"e5k2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск элементов на веб-странице — важный аспект веб-разработки и анализа. Используя инструменты разработчика и различные методы поиска, вы сможете эффективно находить и модифицировать элементы в реальном времени. Знание основ работы с инструментами и использование дополнительных ресурсов значительно упростит вашу работу и повысит продуктивность.","type":"unstyled","key":"f4esq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если статья заинтересовала просим дать обратную реакцию, включая подписку на канал, будем очень признательны.","type":"blockquote","key":"8f6md"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"mufj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"VNkQjRn7jJNKY7SdYiTL"}],"entityMap":{}},"mentions":[]}