Checked css input: Псевдокласс :checked | htmlbook.ru

Leave a Comment / Css / By /

css — Использование ввода [тип = ‘checkbox’]: проверенный селектор

спросил

Изменено 4 года, 11 месяцев назад

Просмотрено 3к раз

Я пытаюсь отобразить или скрыть абзац на html-странице. HTML-код:

  Показать/Скрыть

Lorem ipsum dolor sit amet

Затем я использую CSS3, чтобы скрыть/показать абзац:

 #toggle {
 дисплей:нет;
 }
#show:проверено ~ p {
    дисплей: блок;
}

Это работает. Но если я попробую:

 #toggle {
  дисплей:нет;
}
input[type='checkbox']:checked ~ p {
   дисплей: блок;
   }

это больше не работает. Я не могу понять, почему. Есть ли ошибка в этом селекторе?

 ввод [тип = 'флажок']: отмечен

Спасибо за помощь!!!

  • CSS
  • css-селекторы

4

Это связано со спецификой CSS.
При просмотре иерархии специфичности вы увидите, что id будет выше элемента .

Это означает, что
#toggle является более конкретным, чем:
input[type='checkbox']:checked ~ p
, и поэтому идентификатор переопределяет селектор элемента.

Итак, используйте:

 #переключить {
  дисплей: нет;
}

input[type='checkbox']:checked ~ p#toggle {
  дисплей: блок;
} 
 <дел>
   Показать/Скрыть
  
Lorem ipsum dolor sit amet

Или:

 input[type='checkbox'] ~ p{
  дисплей: нет;
}

input[type='checkbox']:checked ~ p {
  дисплей: блок;
} 
 <дел>
   Показать/Скрыть
  
Lorem ipsum dolor sit amet

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS | :checked Selector — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 23 авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Селектор Checked используется для выбора всех отмеченных элементов во входном теге и переключателях. Этот селектор используется с переключателями, флажками и опционными элементами.

    Синтаксис: 

     :проверен {
    // CSS-свойство
}

    Example 1:  

    html

    < html >

         < head >

             < title >checked selector property title >

             < style >

                 h2 {

                 цвет:зеленый;

                 }

                 input:checked {

                            высота: 8 пикселей;

                     ширина: 10 пикселей;

    }

    Тело {

    Ширина: 60%;

                 }

             стиль >

         head >

         < body >

             < h2 >GeeksforGeeks h2 >

            < h3 >:checked Selector h3 > 9 0 5  0 4 5 9 0 4 5 9 0 4 304 9 0 4 50046 < Форма Action = ">

    Пол:

    < Вход Тип =" СКАЗА "ЗДАЧЕНИЕ". "gender"> Male

                 < input type="radio" value="female" name="gender"> Female< br >< br >

    Субъекты по компьютерным наукам: < BR >

    < Вход Тип = "Checkbox" проверенный = "проверенный" значение = "Bike"> "" . >

                 < input type="checkbox" checked="checked" value="Bike">Операционная система<
    6 br 046

    < Ввод Тип = "Флажок" Значение = "Bike"> Математика < BR >

    < 9005 9005 < 9005

    < 

       > 
       > 
      . «Велосипед»> Физика <  BR  > 
          Форма  > 
         .0046  > 
               body   > 
        html   >                   

    Output:

      

    Example 2:  

    html

    < html >

    9 0005

    46

    < head >

             < title >checked selector title >

             < style >

                 option:checked {

                     высота: 10 пикселей;

                     размер шрифта: 20 пикселей;

    }

    H2 {

    Цвет: зеленый;

                 }

             style >

         head >

         < body >

             <

    center >

             < h2 >GeeksForGeeks h2 >

             < h3 >:checked Selector в <вариант> Элемент h3 >

             < выберите >

    < Опция Value = "DataStructure"> Структура данных Вариант >

    < опция < опция ".

    option >

                 < option value="Operating System">Операционная система option0046 >

                 < option value="Computer Architecture">Computer Architecture option >

             select >

    центр >

         корпус >

    0045 HTML

    >

    Выходность:

    29003.