Что означает слово специфичность в CSS?

/* Специфичность: 1 */
p { color: black; }
 
/* Специфичность: 10 */
.text { color: blue; }
 
/* Специфичность: 100 */
#title { color: red; }
 
/* Специфичность: 1000 */
<p style="color: green;">Текст</p>

/* Формат: [inline, id, class, element] */
 
/* [0, 0, 0, 1] = 1 */
p { color: black; }
 
/* [0, 0, 1, 0] = 10 */
.text { color: blue; }
 
/* [0, 1, 0, 0] = 100 */
#title { color: red; }
 
/* [1, 0, 0, 0] = 1000 */
style="color: green;"

<!-- Самый высокий приоритет -->
<p style="color: red;">Красный текст</p>

/* Специфичность: 100 */
#header { background: blue; }
#nav { color: white; }

/* Специфичность: 10 каждый */
.button { padding: 10px; }
[type="text"] { border: 1px solid; }
:hover { opacity: 0.8; }
:first-child { margin-top: 0; }

/* Специфичность: 1 каждый */
div { display: block; }
p { margin: 16px; }
::before { content: ""; }
::after { display: block; }

/* [0, 0, 0, 1] = 1 */
h1 { color: black; }
 
/* [0, 0, 1, 1] = 11 */
h1.title { color: blue; }
 
/* [0, 1, 0, 1] = 101 */
#main h1 { color: red; }
 
/* [0, 1, 2, 1] = 121 */
#main .content h1.title { color: green; }
 
/* [0, 2, 1, 0] = 210 */
#header #nav .menu { color: purple; }

/* Битва стилей! */
 
/* Специфичность: 1 */
p { color: black; }
 
/* Специфичность: 10 - ПОБЕЖДАЕТ первый */
.text { color: blue; }
 
/* Специфичность: 11 - ПОБЕЖДАЕТ второй */
p.text { color: red; }
 
/* Специфичность: 100 - ПОБЕЖДАЕТ третий */
#content { color: green; }
 
/* Специфичность: 101 - ПОБЕЖДАЕТ четвёртый */
#content p { color: yellow; }

/* !important побеждает всё (кроме другого !important) */
p { color: red !important; } /* Побеждает всё */
 
/* Даже inline стили! */
<p style="color: blue;">Всё равно красный!</p>

/* Специфичность: 0 */
* { margin: 0; }
 
/* Специфичность: 0 + 10 = 10 */
*.class { padding: 0; }

/* Специфичность: 1 + 1 = 2 (комбинатор > не считается) */
div > p { color: blue; }
 
/* Специфичность: 10 + 1 = 11 */
.container p { color: red; }

/* Не работает - специфичность: 10 */
.button { background: blue; }
 
/* Работает - специфичность: 100 */
#sidebar .button { background: blue; }
 
/* Или используем !important */
.button { background: blue !important; }

/* ✅ Хорошо: низкая специфичность */
.card { padding: 20px; }
.card-title { font-size: 24px; }
.card-content { color: #666; }
 
/* ❌ Плохо: высокая специфичность */
#main .sidebar .card .card-header .card-title { font-size: 24px; }

/* Используйте онлайн калькуляторы */
/* https://specificity.keegan.st/ */
/* https://polypane.app/css-specificity-calculator/ */

/* В DevTools видно какие стили перебиты */
/* Перечёркнутые стили = низкая специфичность */

/* Низкая и предсказуемая специфичность */
.block { }
.block__element { }
.block__element--modifier { }

/* ❌ Плохо: слишком высокая специфичность */
#header #nav .menu-item { }
 
/* ✅ Лучше: используйте классы */
.header .nav .menu-item { }

/* Базовые стили */
.button { padding: 10px; background: gray; }
 
/* Модификации */
.button--primary { background: blue; }
.button--large { padding: 15px; }

/* ❌ Плохо: !important везде */
.text { color: red !important; }
.title { font-size: 24px !important; }
 
/* ✅ Лучше: правильная специфичность */
.content .text { color: red; }
.content .title { font-size: 24px; }

/* ❌ Плохо: сложно переопределить */
.page .content .sidebar .widget .title { }
 
/* ✅ Лучше: простые селекторы */
.widget-title { }