Вложенные стили css: Вложенные правила · Less. Путеводитель для новичков

Обратите внимание, что мы не ищем «http://». Это не правильно, поскольку не учитываются адреса, начинающиеся с https://

А если мы хотим задать стиль только для ссылок, ведущих на фотографию? Нужно искать конец строки.

Совместимость

• IE7 +
• Firefox
• Хром
• Safari
• Опера

 a[href$=".jpg"] { color: red; }

Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».

Совместимость

• IE7 +
• Firefox
• Хром
• Safari
• Опера

a[data-filetype="image"]{ color: red; }

Как же нам теперь написать CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать так:

a[href$=".JPG"],
a[href$=". JPEG"],
a[href$=".PNG"],
a[href$=".GIF"] {  
color: red;
}

Но это геморрой и неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?

 <ahref="path/to/image.jpg"data-filetype="image"> Ссылка на изображение </a>

Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:

a[data-filetype="image"] { color: red; }

Совместимость

• IE7 +
• Firefox
• Хром
• Safari
• Опера

16.

a[data-info~="external"] { color: red; }
a[data-info~="image"] { border: 1pxsolidblack; }

А вот кое-что особенное. Не все знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных запятой.

Например, мы можем задать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так, мы можем указать, что ссылка является внешней и что она ссылается на изображение.

"<a href="path/to/image.jpg" data-info="external image"> Click Me </a>

Вот, Html-код на месте, теперь напишем стили.

/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external"* /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image"* /
a[data-info~="image"] { border: 1pxsolidblack; }

Неплохо, да?

Совместимость

• IE7 +
• Firefox
• Хром
• Safari
• Опера

input[type=radio]:checked { border:1pxsolidblack; }

Этот псевдокласс выделяет только элементы пользовательского интерфейса, такие как переключатель или флажок. Причем те, которые отмечены/выбраны. Очень просто.

Совместимость

• IE9 +
• Firefox
• Хром
• Safari
• Опера

Псевдоклассы :before и :after очень крутые. Создается впечатление, что каждый день появляются новые способы их эффективного использования. Они просто генерируют контент вокруг выбранного элемента.

Многие познакомились с этими псевдоклассами при работе с clear-fix hack.

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
. clearfix {
    *display: inline-block;
    _height: 1%;
}

Этот хак использует :after чтобы добавить пробел после элемента, а запретить его обтекание.

Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

Совместимость

• IE8 +
• Firefox
• Хром
• Safari
• Опера

div:hover { background: #e3e3e3; }

Хотите применить стиль к элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.

Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

a:hover {  border-bottom: 1pxsolidblack; }

border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;

Совместимость

• IE6 + (В IE6: hover должен быть применен к ссылке)
• Firefox
• Хром
• Safari
• Опера

div:not(#container) { color: blue; }

Псевдокласс отрицания бывает очень полезным. Скажем, я хочу выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!

Или, если бы я хотел выбрать все элементы, за исключением p.

*:not(p) { color: green; }

Совместимость

• IE9 +
• Firefox
• Хром
• Safari
• Опера

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Псевдо-элемент задается двумя двоеточиями: ::

Выбираем первую букву в параграфе

p::first-letter {
    float: left;
    font-size: 2em;
    font-weight: bold;
    font-family: cursive;
    padding-right:2px;
}

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

Выбираем первую строку в абзаце

p::first-line {
    font-weight: bold;
    font-size: 1.2em;
}

Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.

«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации» Источник

Совместимость

• IE6 +
• Firefox
• Хром
• Safari
• Опера

li:nth-child(3) { color: red; }

Раньше мы не могли выделить, например, третий дочерний элемент? nth-child решает это!

Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .

Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.

Совместимость

• IE9 +
• Firefox 3,5 +
• Хром
• Safari

li:nth-last-child(2) { color: red; }

Что делать, если у вас огромный список элементов в ul , а нем нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(397), можно использовать nth-last-child.

Этот метод почти идентичен приведенному выше, однако отсчет ведется с конца.

Совместимость

• IE9 +
• Firefox 3,5 +
• Хром
• Safari
• Опера

ul:nth-of-type(3) { border: 1pxsolidblack; }

Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.

Совместимость

• IE9 +
• Firefox 3,5 +
• Хром
• Safari

ul:nth-last-of-type(3) { border: 1pxsolidblack; }

Мы можем также использовать nth-last-of-type, отсчитывая элементы с конца.

Совместимость

• IE9 +
• Firefox 3,5 +
• Хром
• Safari
• Опера

ul li:first-child { border-top: none; }

Этот псевдокласс выбирает первый дочерний элемент. Часто используется чтобы убрать border в первом и последнем элементе списка.

Совместимость

• IE7 +
• Firefox
• Хром
• Safari
• Опера

ul > li:last-child { color: green; }

В противоположность :first-child :last-child выбирает последний дочерний элемент.

Совместимость

• IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child. Microsoft-у привет! )
• Firefox
• Хром
• Safari
• Опера

div p:only-child { color: red; }

Вы не часто встретите этот псевдокласс, тем не менее он существует.

Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

<div>
    <p> Один параграф.</p>
</div>
<div>
    <p> Два параграфа </p>
    <p> Два параграфа </p>
</div>

Будет выбран p только первого div`a, потому что он единственный дочерний элемент.

Совместимость

• IE9 +
• Firefox
• Хром
• Safari
• Опера

li:only-of-type { font-weight: bold; }

Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.

Единственное решение заключается в использовании only-of-type .

ul > li:only-of-type { font-weight: bold; }

Совместимость

• IE9 +
• Firefox 3,5 +
• Хром
• Safari
• Опера

first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.

<div>  
    <p> Параграф </p>  
    <ul>     
        <li> Пункт 1 </li>     
        <li> Пункт 2 </li>  
    </ul>  
    <ul>     
        <li> Пункт 3 </li>     
        <li> Пункт 4 </li>  
    </ul>
<div>

А теперь попытайтесь понять как выделить пункт 2.

Решение 1

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

Решение 2

p + ul li:last-child { font-weight: bold; }

Решение 3

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Совместимость

• IE9 +
• Firefox 3,5 +
• Хром
• Safari
• Опера

Источник статьи: http://net. tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Избегайте вложенных селекторов для более модульного CSS — TheSassWay.com

Мы уже писали об опасности слишком глубокой вложенности ваших селекторов CSS. Правило начала — хорошее правило, позволяющее избежать некоторых искаженных селекторов CSS. Но на самом деле есть много преимуществ в том, чтобы пойти дальше этой концепции. Что происходит, если вы избегаете вложенности почти для всех ваших основных селекторов?

Контекстные селекторы

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

 .post {
  маржа: 2em 0;

  .заглавие {
    размер шрифта: 2em;
    шрифт: нормальный;
  }
}

.sidebar .post {
  маржа: 1em 0;

  .заглавие {
    размер шрифта: 1.2em;
    font-weight: жирный;
  }
}
 

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

На первый взгляд такая контекстная мощь может показаться очень хорошей идеей.Вы можете использовать тот же HTML-код на боковой панели вашего сайта, что и в основной части сайта, и получить очень разные стилистические результаты.

Но что произойдет, если вы захотите использовать стили, которые вы написали для сообщений на боковой панели в индексе архива или что-то подобное? Ой! Наш контекстный код нужно будет обновить для нового контекста.

Now Sass предоставляет множество мощных инструментов, которые могут упростить совместное использование стилей в различных контекстах, но это часто связано с дополнительными затратами на сложность.Если вы вообще заботитесь о написании поддерживаемого кода, вы избежите сложности любой ценой.

Более модульный вариант

Давайте запишем эти стили более модульно:

 . post {
  маржа: 2em;

  .заглавие {
    размер шрифта: 2em;
    шрифт: нормальный;
  }
}

.резюме {
  маржа: 2em;

  .заглавие {
    размер шрифта: 1.2em;
    font-wieght: жирный;
  }
}
 

Хот-дог! Так-то лучше. Теперь мы сделали наши правила более общими и не слишком сильно влияли на контекст.Теперь у нас есть два отдельных «модуля» CSS. Сообщение и резюме. Сводку можно использовать для элементов боковой панели или в нашем архивном указателе.

Но мы можем улучшить этот код и дальше. Класс заголовка по-прежнему используется в контексте. Все, что нужно, — это объявить более общее правило заголовка, и ваши стили могут быть отброшены.

Столкновение миров

Предположим, вы решили создать заголовок страницы и объявили правило следующим образом:

 .title {
  размер шрифта: 3em;
  font-weight: жирный;
  красный цвет;
}
 

Не задумываясь о том, как вы уже использовали title в других контекстах, вы создали правило, которое будет влиять на все другие элементы, которые также используют класс «title».Этот пример немного надуманный, но в реальном мире такое столкновение стилей является обычным явлением. В проектах, над которыми я работал в прошлом, в которых используется этот стиль кодирования, часто бывает, что кто-то добавляет новое правило где-то еще, которое вытесняет стили в других контекстах. В больших проектах такие «ошибки» бывает трудно отловить до того, как код будет запущен в производство.

Итак, как мы можем упростить наш код и в то же время добавить ясности? Как это:

 .page-title {
  размер шрифта: 3em;
  font-weight: жирный;
  красный цвет;
}

// Сообщения
.Почта {
  маржа: 2em 0;
}
.Заголовок поста {
  размер шрифта: 2em;
  шрифт: нормальный;
}

// Сводки
.резюме {
  маржа: 1em 0;
}
.summary-title {
  размер шрифта: 1.2em;
  font-weight: жирный;
}
 

А! Намного лучше! Это сводит к минимуму вероятность того, что другие правила будут конфликтовать с теми, которые мы только что определили, и помогает гарантировать, что наши модули CSS будут выглядеть одинаково в любом контексте.

Контекст и модульность

Ключевое слово здесь контекст . Если вы цените модульность, вы будете стремиться избегать контекстных стилей.Бывают случаи, когда контекст может быть полезен. Они часто требуются для адаптивного дизайна и тем. Но вы должны быть очень осознанными, выбирая использование контекстных стилей. Если вы используете их, не задумываясь, вы можете обнаружить, что ваш код чрезвычайно сложно поддерживать, а случайные ошибки появляются чаще, чем вам хотелось бы.

Также стоит отметить, что если вы обнаружите, что регулярно используете вложение, вам следует подумать, может ли его удаление упростить ваш код.

Заключение

Надеюсь, вы не сочтете эти идеи слишком спорными.Если вы хотите узнать больше о модульном CSS, я настоятельно рекомендую взглянуть на электронную книгу Джонатана Снука по этой теме и последовать примеру Гарри Робертса в CSS Wizardry.

Combinators — Мастерская по макету CSS

Добавление класса или идентификатора — не единственный способ изменить стиль некоторых частей документа. Наши более сложные селекторы дают вам возможность выбирать элементы в зависимости от того, где они находятся в документе. Первый набор селекторов, на который мы можем взглянуть, — это комбинаторы.Есть четыре разных комбинатора, и они работают, комбинируя другие селекторы.

Мастер-класс по макету CSS: комбинаторы

Селектор потомков

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

Когда вы используете селектор-потомок, вы можете указать родительский селектор, а затем элемент, который хотите стилизовать. Итак, если у меня есть такая разметка:

  
 Содержимое 

  
 Содержимое внутри блочного класса. 
  

Если бы я выбрал элемент p с помощью селектора элементов, который бы стилизовал оба абзаца — один внутри div с классом box, а также тот, который снаружи. Чтобы стилизовать только p внутри .box, я использую селектор потомков.

 . Коробка п {}  

Здесь .box — это указанный родительский элемент, а p — это селектор внутри этого родителя, к которому мы собираемся применить стили CSS.

В списке может быть более одного потомка. Например, выбор только элементов li, которые являются дочерними по отношению к элементу ul внутри родительского элемента с классом box.

  .box ul li {}  

Вышеупомянутый селектор не выбрал бы элемент li, если бы он находился внутри ol . С длинными цепочками селекторов вы снова можете попасть в ловушку создания CSS, который очень трудно использовать повторно. Если ваши селекторы содержат более трех элементов, это часто указывает на то, что существует лучший способ структурировать ваш CSS.

Селектор детей

Выбрать все элементы, которые являются непосредственными дочерними элементами указанного родителя

Селектор потомков будет нацелен на всех потомков, даже если есть другие элементы между родителем и потомком. Например, если мы возьмем следующую разметку:

  

  
 Пункт первый 
  
 Пункт второй
    

      
 Пункт 2а 
      
 Пункт 2b 
    
  
  
 Пункт третий 
  

Если мы использовали селектор потомков:

 .шт. ли {}  

При этом будут выбраны все элементы li , вложенные в первую ul и вложенные в ul внутри li для элемента 2. Если вместо этого использовать дочерний селектор:

  .items> li {}  

При этом будут выбраны только элементы li , которые являются прямым потомком . items . Если между ними есть другой элемент, то li не будет выбран. Примером того, где вы можете использовать этот метод, является удаление маркеров списка из внешнего списка, но сохранение их для вложенных списков.

  .items> li {
  стиль списка: нет;
}  

Соседний брат

Выбрать элементы, которые являются соседними элементами элемента

Селектор смежного родственного элемента — это полезный селектор, который позволяет выбирать элемент, когда он находится рядом с другим элементом. Вот как мы можем работать с такими вещами, как составные заголовки в CSS.

Часто просят сделать абзац, который идет сразу после заголовка, каким-либо образом, чтобы выделить его.Это может быть достигнуто с помощью соседнего брата, следующий селектор выбирает элемент p только тогда, когда он идет после h3.

  h3 + p {}  

Конечно, их можно комбинировать. Если вы хотите, чтобы это происходило только для содержимого внутри оболочки с классом .box , вы можете объединить селектор-потомок со смежным родственником.

 . Коробка h3 + p {}  

Вышеупомянутый селектор выберет только элемент p, который идет после элемента h3, где оба находятся внутри чего-то с классом.коробка.

General Sibling

Выбрать элементы, которые являются родственниками элемента

Общий селектор одноуровневых элементов работает аналогично соседнему одноуровневому элементу, но выбирает всех одноуровневых элементов, следующих за указанным элементом, даже если они не находятся рядом друг с другом. Этот селектор был добавлен на уровень 3 модуля «Селекторы».

Если я хочу выбрать все элементы p, которые идут после h3, я бы использовал:

  h3 ~ p {}  

Это выберет абзацы, но не заголовки, списки или что-то еще.

Основы Sass: Вложение — SitePoint

Когда вы только начинаете использовать Sass, одна из первых функций, о которых вы услышите, — это вложение. Одна из причин, по которой мы можем использовать препроцессор, состоит в том, чтобы уменьшить объем набора текста, который нам необходим для создания правил CSS. Вложенность позволяет нам использовать ярлыки для создания наших правил. Проблема всех хороших инструментов в том, что всегда есть возможность их неправильного использования.Вложение ничем не отличается, поскольку чрезмерное использование может привести к созданию сложных, неуправляемых таблиц стилей.

Что такое Nesting

Вложенность позволяет писать селекторы, имитирующие структуру вашего HTML. Это позволяет вам использовать ярлыки для создания вашего CSS. Например:

  div {
    п {
        черный цвет;
    }
}  

Это простейшее вложение. Элемент div включает элемент P. Это, в свою очередь, будет компилироваться в.

  div p {цвет: черный; }  

Мы могли бы также дать div его собственные свойства.

  div {
    размер шрифта: 14 пикселей;
    п {
        черный цвет;
    }
}  

Это, в свою очередь, компилируется в два отдельных правила, одно для отдельного блока div , а другое для элемента p внутри блока div .

  div {font-size: 14px;}
div p {цвет: черный; }  

Как использовать раскрой

Вложение стилей достаточно простое. Вы просто заключаете селектор (или селекторы) в фигурные скобки другого селектора.

  .parent {
    .ребенок {
    }
}  

Вложенность может расширяться на сколько угодно уровней. Это означает, что вы можете вкладывать элементы внутри элемента, который, в свою очередь, вложен внутрь другого элемента.

  .first-level {
    .второй уровень {
        .third-level {
            .fourth-level {
            }
        }
    }
}  

На самом деле нет ограничений на количество уровней, на которые вы можете вкладывать элементы. Главное помнить: то, что вы можете что-то делать, не означает, что вы должны.Как правило, рекомендуется не влезать глубже трех уровней. Все, что больше этого, начинает влиять на читаемость кода. Sass помогает нам быстрее писать CSS, а не создавать кучу стилей, которые невозможно поддерживать. Например

  .page {
    семейство шрифтов: без засечек;
    .содержание {
        цвет фона: черный;
        .text {
            цвет белый;
            размер шрифта: 12 пикселей;
            .Заголовок {
                font-weight: жирный;
                a {
                    цвет синий;
                    &: посетил {
                        цвет: зеленый;
                    }
                    &: hover {
                        красный цвет;
                    }
                    &: active {
                        цвет: желтый;
                    }
                }
            }
        }
    }

}  

Выглядит достаточно невинно с вложенностью на пять уровней.Взгляд на скомпилированный вывод показывает проблемы со слишком глубоким вложением.

  .page {font-family: sans-serif; }

.page .content {цвет фона: черный; }

.page .content .text {цвет: белый; размер шрифта: 12 пикселей; }

.page .content .text .headline {font-weight: жирный; }

.page .content .text .headline a {цвет: синий; }

.page .content .text .headline a: посетил {цвет: зеленый; }

.page .content .text .headline a: hover {цвет: красный; }

.page .content .text .headline a: active {цвет: желтый; }  

Это представляет проблему, если мы изменим структуру одной из наших веб-страниц.Допустим, мы изменили .content на .article. Все базовые классы придется переписать, поскольку все они зависят от нахождения внутри .content.

У нас также есть проблемы с тем, что правила, которые мы создаем, полезны только в одной части нашего кода. Если мы хотим использовать стили для .text где-то еще на нашем сайте, мы не можем, поскольку . text привязан к элементам, которые его окружают.

Ссылка на родительские селекторы

В приведенном выше ужасном примере мы используем амперсанд &, чтобы указать, где нужно разместить родительский селектор.: Используется в приведенном выше примере для создания псевдокласса элемента привязки.

  a {
    цвет синий;
    &: посетил {
    цвет: зеленый;
    }
    &: hover {
    красный цвет;
    }
    &: active {
    цвет: желтый;
    }
}  

Это компилируется в

  a {цвет: синий; }

а: посетил {цвет: зеленый; }

a: hover {цвет: красный; }

а: активный {цвет: желтый; }  

Сам по себе он очень удобен для чтения и, как следствие, может обслуживаться кем угодно.Вы также можете использовать & для создания составных селекторов. Для этого после амперсанда добавляется суффикс. Например:

  .col {
    & -span1 {ширина: 8,33%; }
    & -span2 {ширина: 16,66%; }
    & -span3 {ширина: 24,99%; }
}  

Что дает нам

  .col-span1 {ширина: 8,33%; }
.col-span2 {ширина: 16,66%; }
.col-span3 {ширина: 24,99%; }  

Как видите, родительский селектор находится там, где находится амперсанд.

Вложенные объекты

Sass также обеспечивает сокращение для написания стилей с использованием пространств имен CSS.Обычно при установке свойств в одном и том же пространстве имен, например, border , мы должны записать отдельные свойства в нашу таблицу стилей. С помощью Sass мы можем один раз написать пространство имен и вложить его свойства.

  .example {
    граница: {
        стиль: штриховой;
        ширина: 30 пикселей;
        цвет синий;
    }
}  

Это компилируется в

  .example {
    стиль границы: пунктирная;
    ширина границы: 30 пикселей;
    цвет границы: синий;
}  

Как видите, пространство имен добавлено к свойствам. В отличие от приведенного выше примера, нам не нужно было включать &, чтобы граница отображалась в правильном месте.

Заключение

Теперь, когда вы знаете, что такое вложение, используйте его ответственно. Иногда при создании проекта мы можем упустить из виду масштаб того, что мы создаем. При вложении с помощью Sass легко создать кошмар удобочитаемости. Когда и как использовать вложенность — решать вам, если вы решите пройти 8 уровней, во что бы то ни стало, сделайте это. Просто будьте готовы к долгим ночам работы, если проект требует капитального ремонта.

стратегий для сохранения низкой специфичности CSS

Сохранение низкой специфичности CSS для всех селекторов в вашем проекте — достойная цель. Обычно это признак относительной гармонии. Вы не боретесь против самого себя, и у вас есть много возможностей для отмены стилей, когда вам это нужно. Специфика селекторов имеет тенденцию увеличиваться со временем, и для этого есть жесткий потолок. Я уверен, что мы все чувствовали боль! Important тегов и встроенных стилей.

Так как же нам сохранить низкую специфичность с течением времени?

Дайте себе класс, который вам нужен

Возможно, вы пишете селектор с высокой специфичностью, потому что переопределяете уже существующий селектор.Возможно, элемент, который вы пытаетесь выбрать, размещен на нескольких страницах, поэтому вы выбираете его из более высокого класса:

  .section-header {
  / * обычные стили * /
}

body.about-page .section-header {
  / * переопределение с более высокой специфичностью * /
}  

Как бы вы ни относились к этому, поймите, что специфика — это , подкрадывающаяся сюда. Чтобы предотвратить это, есть ли способ изменить имя класса для того элемента, который вы пытаетесь стилизовать напрямую? Иногда может быть полезно создание некоторых вспомогательных функций на стороне сервера или переменных для создания классов, чтобы избежать логики в представлениях.

  <заголовок>
  Что может выводить один класс или оба, по желанию.
  

  .section-header {
  / * обычные стили * /
}

.about-section-header {
  / * переопределение с той же специфичностью * /
  / * возможно расширение стандартного класса * /
}  

Рассмотрите исходный порядок таблиц стилей

Возможно, вы применяете дополнительное имя класса для обработки переопределения стиля за вас.

  <заголовок>
  
  

Но там, где вы пишете свои стили переопределения с .section-header-about , фактически переопределяются существующим классом. Это может произойти из-за порядка выбора в таблице стилей. Оба селектора имеют одинаковую специфику, поэтому правила от того, какой из них объявлен последним, выиграли.

Исправление, которое означает просто обеспечение того, чтобы где бы вы ни писали, ваш класс переопределения появился позже. Вы можете организовать свои таблицы стилей примерно так:

  @import "сторонние библиотеки и прочее";

@import "глобальный материал";

@import "раздел-материал";

@import "определенные-вещи-и-потенциальные-переопределения";  

Уменьшите специфичность переопределяемого объекта

Вы знаете, что они говорят об оставлении вещей лучше, чем вы их нашли.Ты должен это сделать.

Если у элемента есть идентификатор и именно он стилизован, можно ли его удалить? Обязательно выполните поиск #that по всему проекту, прежде чем это делать. Он может использоваться как JS-перехватчик (отлично), и в этом случае вы должны оставить его в покое и либо добавить класс, либо использовать класс, уже включенный в него для CSS.

Не избегайте классов, начинающихся с

Известно, что я использовал селектор вроде:

  .module> h3 {

}  

Это будет работать, пока они не захотят особый стиль для этого элемента h3. Вы можете ввести свою разметку и выглядеть так:

  

  

    Специальный заголовок
  
  

Но к сожалению:

  .module> h3 {
  / * обычные стили * /
}
.уникальный {
  / * Я проиграю эту битву за специфичность * /
}
.module .unique {
  / * Это будет работать, но специфика подкрадывается! * /
}  

Подкрашивание специфичности происходит из-за того, что нас кусает исходный селектор.Вот почему почти все методики CSS рекомендуют плоские структуры типа:

Это может показаться более утомительным, потому что вам могут не понадобиться эти классы прямо сейчас. Но, не избегая этой работы (не поленитесь!), Крючки, которые у вас появятся позже, могут спасти ваше горе.

Используйте каскад

По мере старения проекта становится все более опасным изменять селекторы со специфичностью low , потому что они потенциально могут повлиять на большее количество вещей и иметь непредвиденные последствия.

  #im #just .gonna [do] .this .to .be #safe {
  / * плачет (ಥ_ʖಥ) * /
}  

Но сила CSS влияет на большее количество вещей. Надеемся, что наличие прочной основы, на которой вы строите, означает, что когда-либо потребуется меньше переопределений. Стратегиями для этого могут быть такие вещи, как…

Используйте библиотеку паттернов и / или руководство по стилю, и / или атомарный дизайн

Библиотека паттернов (что-то вроде этой) может означать, что у вас есть то, что вы ищете, когда вам это нужно. Нужны вкладки? Вот и все, это устоявшийся способ сделать это.И он, вероятно, построен таким образом, чтобы специфика уже была легкой, поэтому переопределить не будет слишком сложно.

Атомарный дизайн (книга) может помочь вам в создании вашего сайта (или библиотеки шаблонов), поэтому, даже если у вас нет полного шаблона для того, что вам нужно, у вас есть строительные блоки под ним.

Руководство по стилю может спасти вас, потому что оно может налагать определенные правила, касающиеся специфики, в попытке спасти вас от самого себя.

Рассмотрите возможность подписки на типографику

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

  / * глобальный сброс стилей * /
ul, ol, li {
  стиль списка: нет;
  маржа: 0;
  отступ: 0;
}

/ * преобразование стилей текста в текстовое содержимое * /
.text-content {
  h2, h3, h4 {
  }
  п {
  }
  ul {
  }
  ol {
  }
  /* так далее */
}  

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

Проблемы вне вашего контроля

Возможно, какой-то сторонний код ожидает или внедряет определенный HTML на вашу страницу. Вы должны с этим работать. Вы все равно можете попробовать использовать селекторы с минимальной специфичностью. Вы можете оставлять комментарии в коде, указывая, почему селекторы такие. Вы можете использовать селекторы с низкой специфичностью, но используйте переопределения! Important. Вы можете спросить людей, ответственных за неидеальный код, могут ли они его исправить.

Слегка уточните специфику и обратите внимание на нее

Если вам нужно ввязаться в конкретный бой, вместо того, чтобы хвататься за кувалду, например ID или! Important, попробуйте что-нибудь более легкое.

Квалификатор тега — это минимально возможное обновление специфичности.

  ul.override {
  /* Я выигрываю */
}
.обычный {
}  

Но ограничение селектора конкретным тегом — странный ограничивающий фактор. Было бы разумно просто добавить вместо этого дополнительный класс. Если другое имя не имеет смысла, при необходимости можно использовать тот же класс.

  .nav.override {
}
.override.override {
}
.nav {
}  

То, что вложение — это хорошо, не означает, что специфичность должна повышаться.

Вложение в препроцессоры иногда не рекомендуется, потому что оно упрощает написание избыточных селекторов.Но вложение иногда просто визуально удобно в таблице стилей, потому что оно группирует вещи вместе, облегчая чтение и усвоение.

Богдан Кокотко недавно напомнил мне, что амперсанд в Sass может использоваться, по сути, для создания пространств имен, а не для составных селекторов.

  .what {
    красный цвет;
   &-так {
      цвет: зеленый;
      &-Когда-либо {
        цвет синий;
      }
   }
}  

  .what {
  красный цвет;
}
.и что {
  цвет: зеленый;
}
.what-so-ever {
  цвет синий;
}  

Одноклассная обертка

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

  


   ... существующий материал ...

  

Теперь у вас есть возможность переопределить любой существующий стиль, добавив только один класс в селектор.Это ползучесть специфики, но попытка удержать ее на низком уровне.

  .override .existing {
}  

Только один раз

Если вы когда-нибудь отменяете переопределение, это хорошее место, чтобы остановиться и подумать еще раз.

Можете ли вы дать себе только один класс, который вы можете использовать вместо этого? Единственное переопределение может быть эффективным, как изменение шаблона вместо создания нового шаблона. Отмена переопределения — это путь к замешательству и дальнейшим столкновениям.

В следующий раз сделай лучше

Если вас укусили проблемы со спецификой, даже если исправить их сейчас непрактично, по крайней мере, теперь вы знаете, что это проблематично, и в следующий раз можно подойти к делу иначе.

вложенных элементов — HTML — Форумы Codecademy

Добро пожаловать. Вот еще кое-что, на что вы должны обратить внимание…

специфичность — это таблица взвешенных баллов . Вот почему мы всегда видим, что это написано как 0 0 0 1 .

Это одна строка таблицы, где каждый столбец имеет разную важность, крайний левый столбец имеет наибольшее значение, а крайний правый — наименьшее. Общие селекторы попадают в последний столбец.

Столбцы суммируются, но никогда не переносятся в соседний столбец. Общая сумма остается в этом столбце.

Когда два правила селектора вступают в конфликт, балл слева является более предпочтительным, и его правило выбора имеет приоритет над любым другим, действовавшим ранее. Это относится к каскаду, но это тоже другая история, не имеющая отношения к вложенности.

Очевидно, что вложение относится к родительско-дочерним отношениям, потомкам предусмотрено любое количество уровней. Я надеюсь, что термин уровень должен быть понятен?

Оказывается, жизненно важно понимать вышесказанное и то, как это лежит в основе обхода DOM .

Представьте себе нейрохимическое вещество, предназначенное для размещения только одной формы прорези в клетке мозга, и несколько или многие или все клетки имеют эту прорезь. Море этих химикатов может прикрепиться к любой случайной ячейке.При достаточном количестве химического вещества все ячейки гарантированно будут заняты этим слотом. Вот как CSS работает в DOM. Он декларативен и повсеместен.

  п
  

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

Специфичность и каскад — это то, как мы ее переопределяем.

р: первенец

определенно переопределит общий селектор. p имеет специфичность, 0 0 0 1 , где вышеупомянутое — 0 0 1 1 .

Как нам получить этот взвешенный балл? Подсчитайте кусочки в селекторе. Столбец типа получает 1 для p , столбец класса получает 1 для : first-child . Теперь не имеет значения, насколько велико число в крайнем правом столбце. Единственное, что переопределит это, — это селектор со специфичностью 2 или более в столбце класса или значением больше нуля в любом столбце слева.

Обратите внимание, что ни у одного из общих правил никогда не было шанса противостоять этому правилу псевдокласса?

  div p
  

имеет специфичность, 0 0 0 2 , потому что имеет два селектора типа.Единственное, что он более специфичен, чем p , но может переопределить этот селектор.

  div div p
  

со специфичностью, 0 0 0 3 , может отменить это. Это все еще комбинатор потомков , хотя, как мы видели, он полностью универсален. Помните, универсальные селекторы широко распространены. Они достигают повсюду.

Итог и причина, по которой поощряются универсальные селекторы, заключаются в том, чтобы во всех учетных записях сохранить низкую специфичность. Используйте минимум конкретики, чтобы ваши правила работали.Сделайте это своей мантрой, и CSS всегда будет вашим другом. Когда вы дойдете до написания сценариев и использования JavaScript для опроса и управления DOM, это станет мощным инструментом для продвижения вперед. Знайте, как писать селекторы, которые достигают своих целей.

Sass nesting — Бесплатное руководство по изучению HTML и CSS

Syntax

В Sass правил вложенности CSS позволяет определять селекторов иерархии :

  . title {
  сильный{}
  Эм{}
}  

Это будет скомпилировано в:

 .заглавие{}
.title strong {}
.title em {}  

Поскольку strong и em появляются как в пределах правила .title (между двумя фигурными скобками { } ), оба будут иметь с добавлением с родительским селектором . Название .

Назначение гнезд

Поскольку приоритет CSS может быть сложным, при написании селекторов обычно используется , специфичный , путем объединения нескольких классов / тегов, чтобы правила CSS не отменяли друг друга.

  .description {}
.description p {}
.description p a {}
.description p a: hover {}
.description p strong {}
.description table {}
.description table tr {}
.description таблица tr: nth-child (2n) {}
таблица описания th,
.description table td {}
.description table td.empty,
.description table th.empty {}
.description table th {}  

Чтобы предотвратить перезапись .description , давайте воспользуемся амперсандом и :

  .description {
  п{}
  п а {}
  p a: hover {}
  p сильный {}
  Таблица{}
  таблица tr {}
  таблица tr: nth-child (2n) {}
  таблица th,
  таблица td {}
  таблица th {}
  стол тд.пустой,
  таблица th.empty {}
}  

Вы можете пойти еще дальше, заменив & p и & table на и , чтобы создать вложенных селекторов :

  .description {
  п{
    a {
      &: hover {}
    }
    сильный{}
  }
  Таблица{
    tr {
      &: nth-child (2n) {}
    }
    th,
    td {
      &.пустой{}
    }
    th {}
  }
}  

Помните HTML-вложение ? Отступ в Sass позволяет воспроизвести вложенных HTML-элементов.

Обратите внимание, как мы записали table и . empty только один раз, например, .

Он сгенерирует именно тот CSS, с которого мы начали:

  .description {}
.description p {}
.description p a {}
.description p a: hover {}
.description p strong {}
.description table {}
.description table tr {}
.description таблица tr: nth-child (2n) {}
таблица описания th,
.description table td {}
.description table td.empty,
.description table th.empty {}
.description table th {}  

Родительский селектор амперсанда

Когда вы вкладываете селекторы в Sass, он в основном добавляет пространство между родительским селектором и дочерним селектором .Итак:

  // scss
.parent {
  .ребенок{}
}

// становится в css
.parent .child {}  

Пространство между .parent и .child определяет иерархию . : этот селектор нацелен на элементы HTML с class = "child" , вложенным в class = " родитель ".

А что, если вы хотите использовать псевдоселекторы , например : hover ? Или вы хотите иметь селектор с объединенными классами ? Вы можете использовать амперсанд , который является ярлыком для родительского селектора:

  // scss
.parent {
  &: hover {}
  & .other-class {}
}

// становится в css
.parent: hover {}
.parent.other-class {}  

Обратите внимание на то, что нет пробела между .parent и : hover или .other-class .

.parent.other-class будет нацеливаться на элементы HTML, которые имеют class = "parent other-class" .

Полный пример

  .post-content {}
.post-content a {}
.post-content a: hover {}
.пост-контент в сторону {}
. post-content blockquote {}
.post-content код {}
.post-content h4 {}
.post-content h4 a {}
.post-content h5 {}
.post-content h5: до {}
.post-content h5: после {}
.post-content p {}
.post-content p: first-child {}
.post-content p: last-child {}
.post-content ul {}
.post-content ul ul {}
.post-content ul ul ul {}
.post-content dl {}
.post-content dl: before {}
.post-content dl dt {}
.post-content dl dd {}
.post-content pre {}
Предварительный код .post-content {}
.post-content table {}
.post-content table tr {}
.таблица пост-контента tr: nth-child (2n) {}
.post-content table th,
.post-content таблица td {}
.post-content table th {}
.post-content таблица td.empty,
.post-content таблица th.empty {}
.post-content код таблицы {}
.post-content table pre {}
.post-content table pre: before {}  

  .post-content {
  a {
    &: hover {}
  }
  в стороне{}
  цитата {}
  код{}
  h4 {
    а {}
  }
  h5 {
    &:перед{}
    &:после{}
  }
  п{
    &:Первый ребенок{}
    &:последний ребенок{}
  }
  ul {
    ul {
      ul {}
    }
  }
  dl {
    &:перед{}
    dt {}
    дд {}
  }
  pre {
    код{}
  }
  Таблица{
    tr {
      &: nth-child (2n) {}
    }
    th,
    td {
      &.пустой{}
    }
    th {}
    код{}
    pre {
      &:перед{}
    }
  }
}  

Стили вложенных списков | HTML, XHTML и CSS, шестое издание