Каскадность стилей

Последнее обновление: 21.04.2016

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

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

К примеру, у нас определена следующая веб-страница:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Каскадность стилей в CSS3</title>
        <style>
			.redLink {color: red;}	/* красный цет текста */
			.footer a {font-weight: bold;}	/* выделение жирным */
			a {text-decoration: none;}	/* отмена подчеркивания ссылки */
        </style>
    </head>
    <body>
		<p class="footer">Для просмотра подробной информации пройдите по ссылке: 
			<a class="redLink" href="index.php">Основы CSS 3</a></p>
    </body>
</html>

В CSS определено три стиля и все они применяются к ссылке.

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

Так, в данном случае, все три стиля не конфликтуют между собой, поэтому все эти стили будут применяться к ссылке:

Каскадность в CSS 3

Если же стили конфликтуют между собой, например, определяют разный цвет текста, то в этом случае применяется сложная система правил для вычисления значимости каждого стиля. Все эти правила описаны в спецификации по CSS: Calculating a selectors specificity. Вкратце разберем их.

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

  • Селекторы тегов имеют важность, оцениваемую в 1 балл

  • Селекторы классов, атрибутов и псевдоклассов оцениваются в 10 баллов

  • Селекторы идентификаторов оцениваются в 100 баллов

  • Встроенные inline-стили (задаваемые через атрибут style) оцениваются в 1000 баллов

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Каскадность стилей в CSS3</title>
        <style>
			#index {color: navy;}	/* темно-синий цет текста */
			.redLink {color: red; font-size: 20px;}	/* красный цет текста и высота шрифта 20 пикселей */
			a {color: black; font-weight: bold;}	/* черный цет текста и выделение жирным */
        </style>
    </head>
    <body>
		<a id="index" class="redLink" href="index.php">Основы CSS 3</a>
    </body>
</html>

Здесь к ссылке применяется сразу три стиля. Эти стили содержат два не конфликтующих правила:

font-size: 20px;
font-weight: bold;

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

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

#index {color: navy;}

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Каскадность стилей в CSS3</title>
        <style>
			a {font-size: 18px;}
			.nav li a {color: red;}	 /* красный цет текста */
			#menu a {color: navy;}	 /* темно-синий цет текста */
			.nav .menuItem {color: green;}	/* зеленый цет текста */
			a.menuItem:not(.newsLink) {color: orange;}	/* оранжевый цет текста */
			div ul li a {color: gray; }	/* серый цет текста */
        </style>
    </head>
    <body>
		<div id="menu">
			<ul class="nav">
				<li><a class="menuItem">Главная</a></li>
				<li><a class="menuItem">Форум</a></li>
				<li><a class="menuItem">Блог</a></li>
				<li><a class="menuItem">О сайте</a></li>
			</ul>
		</div>
    </body>
</html>

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

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

Селектор

Идентификаторы

Классы

Теги

Сумма

.nav li a

0

1

2

12

#menu a

1

0

1

101

.nav .menuItem

0

2

0

20

a.menuItem:not(.newsLink)

0

2

1

21

div ul li a

0

0

4

4

Итак, мы видим, что для селектора #menu a в колонке сумма оказалось больше всего баллов - 101. То есть в нем 1 идентификатор (100 баллов) и один тег(1 балл), которые в сумме дают 101 балл.

К примеру, в селекторе .nav .menuItem два селектора класса, каждый из которых дает 10 баллов, то есть в сумме 20 баллов.

При этом псевдокласс :not в отличие от других псевдокдассов не учитывается, однако учитывается тот селектор, который передается в псевдокласс not.

Правило !important

CSS предоставляет возможность полностью отменить значимость стилей. Для этого в конце стиля указывается значение !important:

a {font-size: 18px; color: red !important;}
#menu a {color: navy;}

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850