Условия css: Условия для CSS-переменных

Leave a Comment / Css / By /

css3 — Отмена css-правила через :not

Вопрос задан

Изменён 5 лет 8 месяцев назад

Просмотрен 200 раз

Здравствуйте. Вот такая история. Прописал в стилях

p { text-indent:1em}

чтобы абзацы были с отступом. Но вот беда, тег img тоже находится в теге p и растянутая на всю ширину экрана картинка «некрасиво» сдвигается на 1em. Почему-то ничего не получается сделать. Пробовал

p:not(img) {text-indent:0em;}

и поигрался с этой конструкцией.

Однако, ничего не получается. Каким образом можно отменить отступ для абзацев, где первый дочерний элемент img?

  • css
  • css3

3

Что здесь происходит?

Вы ставите p и всем строчным наследникам text-indent: 1em. Ваши изображения — это наследники p, которые наследуют text-indent: 1em.

Почему не работает конструкция с not?

По вышеописанным причинам: вы пытаетесь применить not к элементу, в то время как реальная работа должна производиться с его наследниками. p:not(img) — ну право дело, где вы видели p, который в то же время был бы img?

Что же делать?

Работать с изображениями, лежащими внутри этого p:

p img {
    text-indent: 0;
}

4

Если не особо мудрить, то можно элементы <img> внутри параграфа сделать блочными:

p img:first-child { display: block; }


║ Скопировано из комментария пользователя @Deonis

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS-правило — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
    1. Селектор
    2. Пара свойство-значение
  4. Как понять
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Скопировано

Весь CSS состоит из однотипных блоков — CSS-правил. Каждое правило состоит из как минимум одного селектора и одной пары свойство-значение.

Пример

Скопировано

Написанное ниже правило найдёт все заголовки второго уровня в HTML и покрасит их в зелёный цвет:

h3 {  color: #32a846;}
          h3 {
  color: #32a846;
}

Как пишется

Скопировано

CSS-правило состоит из нескольких обязательных элементов:

  • селектор;
  • свойство;
  • значение.

Селектор

Скопировано

При помощи селектора мы говорим браузеру, к какому именно элементу будут применяться свойства.

Есть разные типы селекторов. Подробнее о них можно почитать в отдельных статьях:

  • универсальный селектор;
  • селекторы по тегу;
  • селектор по классу;
  • селектор по идентификатору;
  • селектор по атрибуту.

Можно написать правило сразу для нескольких селекторов, перечислив их через запятую:

.
  first-selector,.next-selector {  color: #6e4aff;}
          .first-selector,
.next-selector {
  color: #6e4aff;
}

Селекторы можно разным образом комбинировать между собой. Подробнее в статье про комбинированные селекторы.

Сразу после селектора пишутся фигурные скобки { }. Внутри них будут перечислены свойства и значения.

Пара свойство-значение

Скопировано

Свойства и их значения рассмотрим в паре, потому что они не существуют друг без друга.

Свойство указывает какой именно визуальный аспект выбранного тега будет изменяться.

А вот на то, как именно он будет изменяться, указывает значение этого свойства.

В конце строки обязательно нужно поставить точку с запятой. Иначе браузер склеит свойства и они не будут работать.

Как понять

Скопировано

К селектору применятся свойства, сгруппированные в фигурных скобках. Один и тот же селектор может повторяться не один раз. За то, какие свойства в итоге применятся к элементу, отвечает каскад.

Подсказки

Скопировано

💡 Очень частая ошибка — забытая точка с запятой. Обращайте на это внимание!

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Браузер прочитает CSS как бы вы его не оформили. Хоть в одну строку. Но для простоты чтения и редактирования принято соблюдать простые правила оформления:

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

Подход «Pixel Perfect»

alt + ←

→

Комментарии в CSS

alt + →

CSS | Условные правила — GeeksforGeeks

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

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

  • Последнее обновление: 02 июл, 2021

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

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

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

    Условные правила CSS — это не что иное, как функция CSS, в которой стиль CSS применяется на основе определенного условия. Таким образом, условие здесь может быть либо истинным, либо ложным, и оно будет выполнено на основе утверждений/стиля.
    Эти правила в конечном итоге подпадают под правило CSS at-rule , поскольку они начинаются с

    @ .
    Условные правила:

    • @Supports
    • @media
    • @document

    @supports: . браузер и применить стиль на основе этого.
    Синтаксис:  
     

     @supports ("  условие  ") {
   /* Применяемый стиль */
}

    Example:  
     

    html

    < html >

    < head >

         <

    title >Поддерживает правило title >

         < Стиль >

    @Supports (дисплей: сетка) {

    Секция H2 {

    9

  • 069. CROUT

                     цвет: белый;

                     заполнение: 15 пикселей;

                 }

    }

         style >

    head >

    < body >

         < section >

             < h2 >Гики для гиков h2

    0069          < h4 >A computer science portal for geeks h4 >

         section >

    body >

    HTML >

    • Выход:

    В вышеприведенном примере. Поддерживается.
    @media: Условное правило @media — это правило, которое используется для применения стиля на основе медиа-запросов. Его можно использовать для проверки ширины и/или высоты устройства и применения указанного стиля на основе этого.
    Синтаксис:  
     

     Экран @media и ("  условие  ") {
   /* Применяемый стиль */
}

    Пример:  
     

    html

    < html

    >

    < head >

         < title >Media Rule title >

         < стиль >

             @media screen and (max-width: 700px) {

                9 00090

    раздел0068                  цвет фона: зеленый;

                     цвет: белый;

                     заполнение: 15 пикселей;

                 }

             }

         style >

    head >

    < body >

         < section >

             < h2 >GeeksforGeeks h2 >

             < h4 >Портал информатики для гиков h4 >

         раздел >

    body >

    html >

    Output:  
    Screen width more then 700px:  
     

    Ширина экрана меньше или равна 700 пикселей:  
     

    В приведенном выше примере, когда ширина браузера превышает 700 пикселей, стиль не применяется, но когда размер окна браузера меньше 700 пикселей, применяется стиль.
    @document: Условное правило @document используется для применения стиля к указанному URL-адресу, т. е. стиль будет применяться только к указанному URL-адресу.
    Синтаксис:  
     

     @document url("  YOUR-URL  ") {
   /* Применяемый стиль */
}

    Является экспериментальным и работает только в Firefox с префиксом -moz-, т.е. @-moz-document .
    Пример:  
     

    html

    < html >

    < head >

         < title >Document Rule title >

    < Стиль >

    @-moz-document url ("http: //localhost/gfg/document-rule. html")0070

                 секция h2 {

                     цвет фона: зеленый;

                     цвет: #fff;

                     заполнение: 15 пикселей;

    }

    }

    Стиль > 9003 9008 .0069 head >

    < body >

         < section >

             < h2 >GeeksforGeeks h2 >

             < h4 >Информатический портал для гиков h4 0 >

  • 0

         section >

    body >

    html >

    • Output:  

    В приведенном выше примере стиль применяется, когда указанный URL является посещаемым.

    Поддерживаемые браузеры:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari
       

    Похожие статьи

    Next

    условие if/else в CSS

    Что нового

    Мы используем файлы cookie, чтобы обеспечить вам максимальное удобство просмотра нашего веб-сайта. Используя наш сайт, вы подтверждаете, что вы прочитали и поняли наши Политика в отношении файлов cookie & Политика конфиденциальности

    Условный CSS | СкалаCSS

    Условный CSS

    CSS позволяет применять стили только в определенных условиях. Условия могут быть:

    • Псевдоселекторы
    • Медиа-запросы

    Псевдоселекторы

    Для создания псевдоселектора используется следующий синтаксис:

     &.<псевдо1>
&..… n  >

    При указании :not(…) вы можете указать аргумент в виде строки, или функция в том же формате, что и для создания условий.

    Примеры:

     &.hover // :hover
&.hover.visited // :hover:посетили
&.hover.not(_.visited) // :hover:not(:visited)
&.hover.not(_.firstChild.visited) // :hover:not(:first-child:visited)
&.nthChild(3).not(".debug") // :nth-child(3):not(.debug)
&.nthChild("3n+2") // :nth-child(3n+2)
&.attr("custom-attr", "bla").hover // [custom-attr="bla"]:hover
&.attrExists("custom-attr").hover // [пользовательский-attr]:hover

    Медиа-запросы

    Для создания медиазапроса используется следующий синтаксис:

     // Создание одного запроса
медиа.<атрибут1>
media.<атрибут1>.<атрибут2>…<атрибут  n  >
// Составление запросов
<запрос1> & <запрос2> [… & <запрос  n  >]

    Примеры:

     // Одиночные запросы:
media.color // @media (цвет)
media.screen // @медиа экран
media.screen.landscape.color // @media экран и (ориентация: альбомная) и (цвет)
media.not.handheld.minWidth(320 px) // @media не портативный и (min-width:320px)
// Несколько запросов:
медиа. экран и медиа.не.портативный
// производит: экран @media, а не карманный компьютер
media.screen.color & media.not.handheld & media.minHeight(240 px)
// производит: экран @media и (цветной), а не портативный (min-height: 240px)

    Комбинации

    В дальнейшем я буду сокращать псевдоселектор до «PS», а медиа-запрос до «MQ».

    Чтобы добавить MQ к PS, используйте и .

    Чтобы добавить PS к MQ, укажите PS как метод в MQ. Если у вас уже есть PS, используйте и .

    Примеры:

     // Все они эквивалентны. Все продукты:
// @media screen { :active {...} }
медиа.экран.активный
media.screen & &.active
&.активный и медиа.экран

    Применение стилей

    Общий синтаксис: <условие>(<стили>) .

    В некоторых случаях (медиа-запросы, оканчивающиеся логическими предложениями), Scala запутывается, поэтому синтаксис необходимо изменить на: <условие> - (<стили>) .

    Примеры:

     объект CondExample расширяет StyleSheet. Inline {
 импортировать DSL._
 val примерСтиль = стиль(
 // Простой псевдоселектор
 &.наведите(
 высота строки(1 em)
 ),
 // Несколько псевдоселекторов
 &.visited.not(_.firstChild)(
 шрифтВес.жирный
 ),
 // Простой медиа-запрос
 медиа.ландшафт(
 маржа.авто
 ),
 // Псевдоселектор и медиазапрос
 (&.hover и media.landscape)(
 цвет.черный.важно
 ),
 // Несколько медиа-запросов
 (media.tv.minDeviceAspectRatio(4:/:3) и media.all.resolution(300 dpi))(
 margin.vertical(10 em)
 ),
 // Синтаксис №2: <условие> - (<стили>)
 // Scala путается, потому что media.color и media.color(ColorBits).
 // Используйте второй синтаксис для разрешения.
 медиа.цвет - (
 padding.horizontal(500 пикселей)
 )
 // Все неизменно. Вы можете СУШИТЬ повторяющиеся условия
 режимX(
 backgroundColor(c"#700")
 ),
 режимX.hover(
 backgroundColor(c"#f00")
 )
 )
 def modeX = media.maxWidth(320 px).maxHeight(240 px) & media.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *