САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Особенности



В чем особенности?

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

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

Всеобщий селектор (* имеет низкую характерность, а id селекторы высокую конкретность!

Примечание: Особенность - это распространенная причина, почему ваши CSS правила не применяются к некоторым элементам, хотя вы думаете, что они должны применяться.


Иерархия особенности

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

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

Пример: <h1 style="color: #ffffff;">.

Идентификатор - это уникальный идентификатор элементов страницы, таких как, #navbar.

Классы, атрибуты и псевдо-классы - Эти категории включают .класс [атрибут] и псевдо-классы как например :hover, :focus и т.д..

Элементы и псевдо-элементы - Эта категория включает элемент имена и псевдо-элементы, как например h1, div , :before и :after .


Как рассчитать особенности?

Запомните, как рассчитать особенности!

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

Рассмотрим следующие три фрагмента кода:

Пример

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

Особенность A - 1 (один элемент)
Особенность Б - 101 (одна ссылка ID и один элемент)
Особенность C - 1000 (встроенный стиль)

Так как 1 < 101 < 1000, третье правило (C) имеет более высокий уровень специфичность, а значит будет применяться


Правила особенности

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

Пример

h1 {background-color: yellow;}
h1 {background-color: red;}

Редактор кода »

Последнее правило применяется всегда.


ID селекторы имеют более высокую специфичность, чем селекторы атрибутов - Посмотрите на следующие три строки кода:

Пример

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Редактор кода »

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


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

Пример

Из внешнего файла CSS:
#content h1 {background-color: red;}

В HTML файле:
<style>
#content h1 {
    background-color: yellow;
}
</style>

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


Селектор класс превосходит любое количество селекторов элементов - селектор класса, например: .intro выигрывает у h1, p, div и т.д.:

Пример

.intro {background-color: yellow;}
h1 {background-color: red;}

Редактор кода »


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