Специфичность CSS
То, какое объявление стиля достанется элементу, определяет алгоритм, называемый специфичностью CSS.
Когда два или более правила CSS указывают на один элемент, его стиль берётся из правила с наивысшей специфичностью.
Примеры ниже показывают это на практике:
Селектор элемента
Здесь действует только одно правило: оно делает элементы <p> красными, поэтому текст красный.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Selector Specificity</title>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Селектор класса
Теперь селектор класса с именем «test» добавляет зелёный цвет. Текст становится зелёным, потому что селектор класса имеет более высокую специфичность, чем селектор элемента.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector Specificity</title>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Селектор id
К ним присоединяется селектор id с именем «demo». Текст становится синим, потому что селектор id имеет более высокую специфичность, чем селектор класса и селектор элемента.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Selector Specificity</title>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Встроенный стиль
Теперь у элемента <p> есть встроенный стиль. Текст становится розовым, потому что нет специфичности выше, чем у встроенного стиля.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Style Specificity</title>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>