Селекторы позволяют выбирать нужные элементы из кода страницы. CSS - означает, что они используются в основном в каскадных таблица стилей, отвечающих за внешний вид страницы, но мы будем использовать их в своих целях.

Много букв никто не любит, поэтому представим, что вы - новобранцы, заброшенные в качестве подкрепления к противотанковому подразделению. Через 15 минут на нас снова попрут танки врага и мне нужно как можно быстрее научить вас пользоваться устройствами наведения турелей. 

И так, открываем код страницы. Crome - Правая кнопка мыши - Исходный код. В этом режиме Crome открывает новое окно с исходным кодом, в левом верхнем углу которого есть стрелочка с квадратом. Нажимаем её и ведём курсор по странице... её элементы начинают подсвечиваться в коде. Выбираем нужный нам элемент, например заголовок. 

В заголовке мы видим что-то вроде 

<div id="question-header" class="grid sm:fd-column">... 

id - это самый верный наш друг и лучший способ навестись на цель. id обычно не повторяются на странице и однозначно указывают на элемент. Селектором для элемента с указанным id будет такая строчка 

#question-header

Но, допустим, в заголовке присутствуют ещё какие-то элементы и нужны они нам не все. Тогда мы через пробел можем дополнительно уточнить цель. Конструкция 

#question-header h1 

будет обозначать текст внутри тега h1, который в свою очередь находится внутри элемента с id=question-header

Относительно легко можно работать и с вот такой конструкцией

<div id="left-sidebar" data-is-here-when="md lg" class="left-sidebar js-pinned-left-sidebar">

У неё есть class и селектор будет выглядеть как

.js-pinned-left-sidebar 

Но с классами следует быть осторожным, они могут относится к нескольким элементам и вы можете получить больше, чем рассчитывали. В этом случае следует искать дополнительные уточняющие классы или id в вышестоящих элементах, например:

.main-window .js-pinned-left-sidebar

Ну и наконец, самый убийственный вариант, когда нет ничего - ни классов, ни id, голые теги. Тогда мы делаем так: 

body > div:nth-child(2)

что значит, второй по порядку div, принадлежащий непосредственно корневому элементу страницы body. В нём дальше можно выбрать таким же образом другие элементы, отсчитывая их по порядку, без всяких классов и id. 

Этого достаточно для минимального ликбеза, а подробнее об этом и не только, можно почитать здесь: https://habr.com/ru/company/otus/blog/350368/

• 1.1 Возможности сервиса
• 1.2 Версии движка
• 1.3. Активный и пассивный режимы
• 1.5 Ресурсы
• 1.7 Личные сообщения и комментарии
• 1.7.1 Внешние ссылки
• 1.8 Проекты
• 1.9 Промокоды
• 2 Блоксхемы (БС)
• 2.1 Условия
• 2.1.1 Внешний расчётный модуль (ВРМ)
• 2.1.2 Библиотека ВРМ
• 2.2 Действия
• 2.5 Переменные, функции, константы
• 3. Приложение
• 4. Библиотека
• 4.1 Страницы
• 4.1.2 Датавиджеты
• 4.1.2.1 Форма ввода
• 4.1.2.2 Рейтинг в виджете приложения
• 5. API
• 6. Статьи, ссылки, примеры
• 6.1 Графический движок cover41
• 6.2 Синтаксис Cover
• 7. Энергия
• 8.1 CSS-селекторы
• Ссылка активации