Специфика CSS: вещи, которые вы должны знать

1. Специфика CSS: обзор
2. Специфическая иерархия
3. Как измерить специфичность?
4. Примеры специфичности: Проверьте себя
5. Специфика: основные принципы
6. Правила специфичности
7. Пример специфичности
8. Специфика на практике
9. Инструменты и ресурсы для CSS
10. Что есть что?

Специфика CSS не проста. Однако есть способы объяснить это простым и интуитивно понятным способом. И это то, о чем эта статья.

Помимо Поплавки Специфика CSS - одна из самых сложных концепций в каскадных таблицах стилей. Различный вес селекторов обычно является причиной того, что ваши CSS-правила не применяются к некоторым элементам, хотя вы думаете, что они должны иметь. Чтобы минимизировать время поиска ошибок, вам нужно понять, как браузеры интерпретируют ваш код. И чтобы понять это, вам нужно иметь четкое понимание того, как работает специфика . В большинстве случаев такие проблемы вызваны тем фактом, что где-то среди ваших правил CSS вы определили более конкретный селектор. Эта статья была обновлена ​​5 октября 2016 г.

Специфика CSS не проста. Однако есть способы объяснить это простым и интуитивно понятным способом. И это то, о чем эта статья. Вы поймете концепцию, если вы любите Звездные войны. В самом деле.

Рекомендуемое чтение: Специфика CSS и Наследование

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

Специфика CSS: обзор

1. Специфика определяет, какое правило CSS применяется браузерами.
2. Специфика обычно является причиной того, что ваши CSS-правила не применяются к некоторым элементам, хотя вы думаете, что они должны.
3. Каждый селектор имеет свое место в иерархии специфичности.
4. Если два селектора применяются к одному и тому же элементу, выигрывает тот, у которого более высокая специфичность .
5. Существует четыре категории, которые определяют уровень специфичности данного селектора: встроенные стили, идентификаторы, классы, атрибуты и элементы.
6. Вы можете понять специфику, если вы любите Звездные войны : CSS Specific Wars ,
7. Вы можете понять специфику, если вы любите покер: CSS Specificity для игроков в покер
8. Когда селекторы имеют одинаковое значение специфичности, учитывается последнее правило.
9. Когда селекторы имеют неодинаковое значение специфичности, более конкретным правилом является правило, которое учитывается.
10. Правила с более конкретными селекторами имеют большую специфичность.
11. Последнее определенное правило переопределяет любые предыдущие конфликтующие правила.
12. Встроенная таблица стилей имеет большую специфику, чем другие правила.
13. Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов.
14. Вы должны всегда пытаться использовать идентификаторы для повышения специфичности .
15. Селектор класса бьет любое количество селекторов элементов.
16. Универсальный селектор и унаследованные селекторы имеют специфичность 0, 0, 0, 0.
17. Вы можете рассчитать специфичность CSS с помощью калькулятора специфичности CSS.

Что такое специфика?

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

Специфическая иерархия

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

1. Встроенные стили (Наличие стиля в документе). Встроенный стиль живет в вашем документе XHTML. Он прикреплен непосредственно к элементу, который будет стилизован. Например, <h1 style = «color: #fff;»>

2. ID (число селекторов идентификаторов) ID - это идентификатор элементов вашей страницы, например #div.

3. Классы, атрибуты и псевдоклассы (количество селекторов классов). Эта группа включает в себя .classes, [attribute] и псевдоклассы, такие как: hover,: focus и т. Д.

4. Элементы и псевдоэлементы (количество селекторов элемента (типа)). В том числе, например: до и после.

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

Как измерить специфичность?

Запомните, как измерить специфичность. «Начните с 0, добавьте 1000 для атрибута стиля, добавьте 100 для каждого идентификатора, добавьте 10 для каждого атрибута, класса или псевдокласса, добавьте 1 для каждого имени элемента или псевдоэлемента. Так в

body #content .data img: hover

значение специфичности будет 122 ( 0,1,2,2 или 0122): 100 для #content, 10 для .data, 10 для: hover, 1 для body и 1 для img. »[CSS Specificity]

Альтернативный способ: «Подсчитать количество атрибутов ID в селекторе (= a). Подсчитайте количество других атрибутов и псевдоклассов в селекторе (= b). Подсчитайте количество имен элементов и псевдоэлементов в селекторе (= c). Объединение трех чисел abc дает специфичность . [ CSS Selector Специфика ]

CSS Specific Wars - Шпаргалка Чтобы помочь мне лучше понять расчет специфичности, я составил диаграмму на основе следующих значений специфичности (или силы ситхов). Каждому персонажу (селектору) присваивается своя сила ситов (значение специфичности) в зависимости от того, насколько они сильны на пути Темной стороны. Штурмовик менее силен, чем Вейдер, который в свою очередь менее силен, чем Император.

Примеры специфичности: Проверьте себя

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

1 * {} 0 2 li {} 1 (один элемент) 3 li: первая строка {} 2 (один элемент, один псевдоэлемент) 4 ul li {} 2 (два элемента) 5 ul ol + li {} 3 (три элемента) 6 h1 + * [rel = up] {} 11 (один атрибут, один элемент) 7 ul ol li.red {} 13 (один класс, три элемента) 8 li.red.level {} 21 (два классы, один элемент) 9 style = «» 1000 (один встроенный стиль) 10 p {} 1 (один селектор HTML) 11 div p {} 2 (два селектора HTML) 12 .sith 10 (один селектор класса) 13 div p. sith {} 12 (два селектора HTML и селектор класса) 14 # сит 100 (один селектор идентификатора) 15 body #darkside .sith p {} 112 (селектор HTML, селектор идентификатора, селектор класса, селектор HTML; 1 + 100 + 10 +1)

Специфика: основные принципы

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

#content h1 {padding: 5px; } #content h1 {padding: 10px; }

где оба правила имеют специфичность 0, 1, 0, 1 , последнее правило всегда применяется.

Правила специфичности

Селекторы идентификаторов имеют более высокую специфичность, чем селекторы атрибутов. Например, в HTML селектор # p123 более специфичен, чем [id = p123] с точки зрения каскада. Пример: в

A: a # a-02 {background-image: url (n.gif); } и B: a [id = "a-02"] {background-image: url (n.png); }

первое правило (A) является более конкретным, чем второе (B). [ Спецификация W3C CSS 2.1 ]

Контекстные селекторы более специфичны, чем одноэлементный селектор. Это также верно для других селекторов, включающих более одного селектора HTML-элемента. [ Каскадное наследование ]

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

CSS:

#content h1 {padding: 5px; }

(X) HTML:

<style type = "text / css"> #content h1 {padding: 10px; } </ style>

последнее правило будет применяться.

Последнее определенное правило переопределяет любые предыдущие конфликтующие правила. Например, учитывая эти два правила

р {цвет: красный; background: yellow} p {color: green}

... абзацы будут выделены зеленым текстом. У них также будет желтый фон, потому что первое правило не полностью отрицается. [ BrainJar.com ]

Селектор класса бьет любое количество селекторов элементов. .introduction превосходит html body div div h2 p. [Особенности CSS для игроков в покер]

Универсальный селектор имеет специфичность 0, 0, 0, 0. *, body * и аналогичные селекторы имеют нулевую специфичность. Унаследованные значения также имеют специфичность 0, 0, 0, 0. [ Уточнена специфика CSS ]

Пример специфичности

Рассмотрим три фрагмента кода:

A: h1 B: #content h1 C: <div id = "content"> <h1 style = "color: #fff"> Заголовок </ h1> </ div>

Специфичность A составляет 0,0,0,1 ( один элемент), специфичность B составляет 0,1,0,1 (одна контрольная точка ID и один элемент), значение специфичности C составляет 1,0,0 , 0 , так как это встроенный стиль.

поскольку

0001 = 1 <0101 = 101 <1000,

… Третье правило имеет больший уровень специфичности и поэтому будет применяться. Если бы третьего правила не существовало, второе правило было бы применено.

Специфика на практике

Используйте LVHA для оформления ссылок. «Чтобы убедиться, что вы видите различные стили ссылок, лучше всего размещать стили в следующем порядке:« link-посещения-наведения-активного »или« LVHA »для краткости.» [ Специфика ссылки ]

Никогда не используйте! Важно. «Если у вас есть проблемы со спецификой, есть несколько быстрых способов их решения. Во-первых, избегайте! Важным. »« Важное объявление переопределяет обычные объявления, но оно не структурировано и редко требуется в таблице стилей автора ». [ Понимание специфики , Специфика выбора ]

Используйте id, чтобы сделать правило более конкретным. Замена a.highlight на ul # blogroll a.highlight изменяет специфичность с 0, 0, 1, 1 на 0, 1, 1, 2 .

Минимизируйте количество селекторов. «Используйте наименьшее количество селекторов, необходимых для стилизации элемента». [ Понимание специфики ]

Инструменты и ресурсы для CSS

Специфика CSS для игроков в покер Если вы не из мира программирования и CSS кажется немного запутанным, возможно, эта аналогия может помочь прояснить некоторые концепции. Думайте о правилах CSS как о покерных руках. Лучшая рука определяет стиль элемента.

Калькулятор специфичности CSS Вычисляет специфику данного селектора.

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

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

Селекторы CSS 2.1 объяснили Обширный обзор селекторов CSS 2.1. Изучение правильного использования всего спектра CSS-селекторов, доступных в CSS 2.1, может реально помочь вам сделать ваш HTML намного чище. Это позволит вам свести к минимуму ненужное использование атрибута класса и необходимость добавления посторонних элементов div и span в разметку.

Ошибки специфичности CSS в IE Краткий обзор ошибок специфичности, реализованных в Microsoft Internet Explorer / Win.

Структура CSS и правила Базовый синтаксис, псевдоклассы и псевдоэлементы, каскадный порядок.

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

Рекомендуемое чтение: Наследование CSS, Каскад И Глобальная Область

Что есть что?

Селектор - это элемент, связанный с определенным стилем. Например, р в

p {padding: 10px; }

Селектор класса - это селектор, который использует определенный класс (несколько на страницу). Например, раздел в

p.section {padding: 10px; }

Селектор идентификатора - это селектор, который использует индивидуально назначенный идентификатор (по одному на страницу). Например, раздел p # в

CSS: #section {padding: 10px; } (X) HTML: <p id = "section"> Текст </>

Контекстный селектор - это селектор, который определяет точный порядок каскадирования для правила. Например, p span в

p span {font-style: italic; }

определяет, что все span-элементы в p-элементе должны быть выделены курсивом .

Селектор атрибута соответствует элементам, которые имеют определенный атрибут или его значение. Например, p заголовок в

p [title] {font-weight: bold; }

соответствует всем p-элементам, которые имеют атрибут title

Псевдоклассы - это специальные классы, которые используются для определения поведения элементов HTML. Они используются для добавления специальных эффектов к некоторым селекторам, которые применяются автоматически в определенных состояниях. Например: посетил в

a: посетил {текст-украшения: подчеркивание; }

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

p: первая строка {font-варианта: маленькие заглавные буквы; } a: link: after {content: "(" attr (href) ")"; }

Дальнейшее чтение: ! важные объявления CSS: как и когда их использовать

Похожие

Комментарии