Сестринский селектор

@108Cool · Регистрация: 18.01.2018

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

Здравствуйте, помогите понять, пожалуйста)
Вот код (не обращайте внимание на "не" нужные классы)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="ru">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Пример</title>
    <link rel="stylesheet" href="css/estyle.css">
</head>
 
<body>
    <ul class="list">
        <li class="filter-option">
            <input class="filter-item filter-input filter-input-radio" type="radio" id="adaptive" value="adaptive"
                name="network-choice" checked>
            <label for="adaptive">Адаптивная</label>
        </li>
        <li class="filter-option">
            <input class="filter-item filter-input filter-input-radio" type="radio" id="fixed" value="fixed"
                name="network-choice">
            <label for="fixed">Фиксированная</label>
        </li>
        <li class="filter-option">
            <input class="filter-item filter-input filter-input-radio" type="radio" id="rubber" value="rubber"
                name="network-choice" disabled>
            <label for="rubber">Резиновая</label>
        </li>
    </ul>
</body>
 
</html>

CSS
1
2
3
.filter-input:disabled + label {
    color: rgba(40, 49, 54, 0.3);
}

Вопрос:
- Почему "+ label" действует на "третью" часть списка, когда, как я понял (я новичок) должно быть на первую...почему так?

@gogolik · 20.11.2019, 07:17

У вас третий инпут disabled, вот на него и действует. Как написали - так и работает.

@AlexZaw · 20.11.2019, 14:49

Сообщение от 108Cool

Почему "+ label" действует на "третью" часть списка

Попробую объяснить подробнее. Ваш селектор в css означает что нужно выбрать label, перед которым будет элемент с псевдоклассом :disabled и у которого будет класс filter-input Если читать слева направо(а в css, вообще-то читается справа налево) то это означает, что нужно найти элемент с классом filter-input, у которого есть псевдокласс :disabled следом за которым будет идти label
По моему еще больше запутал

@108Cool · 22.11.2019, 06:30 **[ТС]**

Всё стало очень понятно, большое спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@gogolik Супер-модератор 3952 / 2063 / 829 Регистрация: 13.03.2010 Сообщений: 6,784
	20.11.2019, 07:17
	У вас третий инпут disabled, вот на него и действует. Как написали - так и работает. 1

@108Cool 0 / 0 / 0 Регистрация: 18.01.2018 Сообщений: 43
	22.11.2019, 06:30 [ТС]
	Всё стало очень понятно, большое спасибо!!! 0