Помимо Floats, CSS Specificity является одним из наиболее сложных понятий понять в каскадных таблиц стилей.

Разный вес селекторов, как правило, причина, почему ваш CSS-правил don’ T применяются к некоторым элементам, хотя вы думаете, что они должны иметь.Для того, чтобы свести к минимуму время на ошибку охота вам нужно понять, как браузеры интерпретируют код.И чтобы понять это, вы должны иметь твердое понимание о том, как специфика works.В большинстве случаев такие проблемы вызваны простым фактом, что где-то среди ваших CSS-правил you’ ве определены более конкретные selector.

CSS Специфика isn’ T прост.Тем не менее, есть методы, чтобы объяснить это простым и интуитивно понятным способом.И that’ ы, что эта статья все о.You’ поймете концепцию, если вы любите Star Wars. Really.

Let’ посмотрим на некоторые важные вопросы, связанные с CSS Specificity а также примеры, правила, принципы, общие решения и resources.

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

CSS Специфика: Overview

1. Специфика определяет, что CSS правило applied по browsers.
2. Специфика, как правило, причина, почему ваш CSS-правил don’ T применяются к некоторым элементам, хотя вы думаете, что они should.
3. Каждый переключатель имеет свое место в специфике hierarchy.
4. Если два селекторы применяются к одному элементу, один с более высокую специфичность wins.
5. Есть четыре различных категорий, которые определяют специфику уровня данного селектора: встроенные стили, идентификаторов, классов и атрибутов elements.
6. Вы можете понять специфику если вы любите Звезда Wars:. CSS Специфика Wars
7. Вы можете понять специфику если вы любите покер: CSS специфичность для покера Players
8. Когда селекторы имеют равную ценность специфики, последнее правило является тот, который counts.
9. Когда селекторы имеют неравные значения специфичности, более конкретные правила является тот, который counts.
10. Правила с более конкретными селекторы имеют большую specificity.
11. Последнее правило определено отменяет все предыдущие, противоречивые rules.
12. Встроенной таблицы стилей имеет большую специфику по сравнению с другими rules.
13. ID селекторы имеют более высокую специфичность, чем атрибут selectors.
14. Вы всегда должны пытаться использование идентификаторов для увеличения specificity.
15. Селектора класса бьет любое количество элементовselectors.
16. Универсальный селектор и унаследовал селекторы имеют специфику 0, 0, 0, 0.
17. Вы можете рассчитать CSS специфичность CSS Специфика Calculator.

Что такое Специфика

• Специфика определяет, что CSS правило применяется browsers. “ Специфика является одним из видов взвешивания, которая имеет отношение как ваш каскадных таблиц стилей (CSS) правила displayed.” [ взаимопонимании Specificity]
• Selector специфика процесса, используемого для определить, какие нормы принимают precedence В CSS, когда несколько правил может быть применена к одному элементу в разметке.[ Selector Specificity]
• Каждый выбор имеет свои specificity. “ Все правила в вашем CSS несут специфики рейтинге независимо от выбора типа, хотя взвешивание, которое дается каждому селектором типа меняется и, в конечном счете влияет на стиль вашей веб-документов.” [ взаимопонимании Specificity]
• Если два селекторы применяются к одному элементу, с более высокой специфичностью wins.

Специфика hierarchy

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

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

  2.Идентификаторы (ID # из селекторов)ID это идентификатор для элементов страницы, например, #div.

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

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

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

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

• Запомните, как измерить specificity. “ начинаются с 0, добавить 1000 для атрибута стиля, добавьте 100 для каждого ID, добавить 10 для каждого атрибута, класса или псевдо-класса, добавить 1 для каждого имени элемента или псевдо-элемент.Таким образом, в

  body #content .data img:hover

  Специфика значение будет 122 ( 0,1,2,2 или 0122). 100 для # содержанию, 10 для данных, 10: наведите, 1 для тела и 1 для img.” [ CSS Specificity]

• Альтернативный способ: “ Подсчитайте количество атрибутов ID в селекторе (=).Подсчитайте количество других атрибутов и псевдо-классов в селекторе (= б).Подсчитайте количество имен элементов и псевдо-элементов вселекторе (= C).Объединение трех чисел ABC дает specificity.[ CSS Selector Specificity]
• CSS Специфика войн – Чит SheetЧтобы помочь мне понять специфику расчета лучше, я сделал диаграмму на основе следующих специфичность (или Сит мощности) значения.Каждый персонаж (Селектор) задается своей собственной власти ситов (специфичность значения) в зависимости от того, насколько они сильны в пути темная сторона.Штурмовик является менее мощным, чем Вейдер которые, в свою очередь менее мощные, чем Emperor.

Специфика Примеры: Test Yourself

It’ проще для расчета специфичности, используя первый метод.Let’ S выяснить, как на самом деле done.

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

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

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

  Где оба правила имеют свою специфику 0, 1, 0, 1, последнее правило: всегда applied.

• Неравный специфика: чем большеконкретные правила является тот, который counts. “ селектор может содержать один или несколько опорных точек, тем выше специфичность рейтинг этих ориентиров более конкретные ваши правила is.” Браузеры выбрать наиболее конкретные правила для отображения.[Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  
  Главная → Программирование → 27.07.2007 by Newsbot