Работа с селекторами

@DmitryEk · Регистрация: 11.03.2020

Студворк — интернет-сервис помощи студентам

Как начинающий разбираюсь с комбинациями селекторов.

HTML5
1
2
3
4
5
6
<div>
  <p id="var">
    про море
  <h1>Море волнуется</h1>
  </p>
 </div>

CSS
1
2
3
#var h1 {
  color: red;
}

Я полагал, что браузер прочитает запись так: найди заголовок h1 вложенный в элемент с id var и покрась его в красный цвет. Но на практике не сработало. Почему?

p.s. Знаю что на практике так не делают а присваивают классы и стилизуют. Но все таки хочется разобраться. Заранее благодарю за ответ.

@gogolik · 21.03.2020, 10:21

Потому что помещать h1 внутрь p нельзя. Замените p на div.

Так же, где стили прописываете? В отдельном файле?

@DmitryEk · 21.03.2020, 10:28 **[ТС]**

Стили прописываю в css. файл приложил.

CSS
1
2
3
4
5
6
1
2
3
#var h1 {
  color: red;
}

Или Вы про другое спрашиваете?
С h1 замечание поправил получилось. Тогда совсем запутался. Изначально пытался ответить вот на этот вопрос:
"Нужно посчитать специфичность селектора div.wrapper>#list>li a"
Были варианты: 0113 я думал он правильный но похоже что нет. Ещё 3110, 0311, 0131 и что селектор не правильный. В итоге остановился на неправильном селекторе. А оказался он правильный? Подскажите пожалуйста где я ошибся ?

@DrType · 21.03.2020, 11:42

Селектор div .wrapper > #list>li a выглядит корректно (ссылка в пункте списка с id="list", который является непосредственным потомком элемента с class="wrapper", вложенного в какой-то блок). Если в HTML-разметке существует ссылка, удовлетворяющая всем этим условиям, то почему нет.

HTML5
1
2
3
4
5
6
7
8
9
<div>
  <div class="wrapper">
    <ul id="list">
      <li>
        <a href='http://cyberforum.ru'>ссылка</a>
      </li>
    </ul>
  </div>
</div>

@NTHing · 21.03.2020, 12:04

Калькулятор специфичности...

@DmitryEk · 21.03.2020, 12:20 **[ТС]**

Спасибо.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@gogolik Супер-модератор 3957 / 2071 / 831 Регистрация: 13.03.2010 Сообщений: 6,827
	21.03.2020, 10:21
	Потому что помещать h1 внутрь p нельзя. Замените p на div. Так же, где стили прописываете? В отдельном файле? 1

@NTHing 1818 / 962 / 388 Регистрация: 26.11.2014 Сообщений: 1,962 Записей в блоге: 1
	21.03.2020, 12:04
	Сообщение было отмечено gogolik как решение Решение Калькулятор специфичности... Миниатюры 2

@DmitryEk 0 / 0 / 0 Регистрация: 11.03.2020 Сообщений: 12
	21.03.2020, 12:20 [ТС]
	Спасибо. 0

Работа с селекторами

Решение