В CSS селекторы указывают, к каким элементам HTML применять стили. В JavaScript они используются для выбора элементов DOM.

Основные типы CSS-селекторов:

Селектор типа: Выбирает все элементы указанного типа.
```
div {
  /* стили для всех <div> */
}
```
Селектор класса: Выбирает элементы с указанным классом.
```
.my-class {
  /* стили для элементов с классом "my-class" */
}
```
Селектор ID: Выбирает элемент с указанным ID (должен быть уникальным).
```
#my-id {
  /* стили для элемента с ID "my-id" */
}
```
Универсальный селектор: Выбирает все элементы.
```
* {
  /* стили для всех элементов */
}
```
Комбинаторы: Объединяют селекторы.
- Потомок ( ): div p - выбирает все <p> внутри <div>.
- Прямой потомок (>): div > p - выбирает все <p>, являющиеся прямым потомком <div>.
- Соседний брат (+): h2 + p - выбирает первый <p>, следующий непосредственно за <h2>.
- Общий брат (~): h2 ~ p - выбирает все <p>, следующие за <h2>.

В JavaScript для выбора элементов DOM используются методы querySelector и querySelectorAll.

querySelector: Возвращает первый элемент, соответствующий указанному CSS-селектору.
```
// Выбирает первый элемент с классом "my-class"
const element = document.querySelector('.my-class');
```
querySelectorAll: Возвращает NodeList (похожий на массив) всех элементов, соответствующих указанному CSS-селектору.
```
// Выбирает все элементы <div>
const elements = document.querySelectorAll('div');
```

Пример использования в JavaScript:

// Находим кнопку по ID
const myButton = document.querySelector('#my-button');

// Добавляем обработчик события клика
if (myButton) {
  myButton.addEventListener('click', () => {
    alert('Кнопка нажата!');
  });
}

// Находим все элементы списка с классом "list-item"
const listItems = document.querySelectorAll('.list-item');

// Изменяем текст каждого элемента списка
listItems.forEach(item => {
  item.textContent = 'Обновленный текст';
});

Соотношение между CSS-селекторами и их использованием в JavaScript querySelector/querySelectorAll прямое. Вы можете использовать те же CSS-селекторы, что и в стилях, для выбора элементов в JavaScript.

Как использовать селектор в CSS или JavaScript?