Specificitatea CSS
Declarația de stil care ajunge la un element este decisă de un algoritm numit specificitate CSS.
Când două sau mai multe reguli CSS vizează același element, stilul său vine de la regula cu cea mai mare specificitate.
Exemplele de mai jos arată acest lucru în practică:
Selector de element
Aici se aplică o singură regulă: ea face elementele <p> roșii, așa că textul este roșu.
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>
Selector de clasă
Acum, un selector de clasă numit „test” adaugă o culoare verde. Textul devine verde, deoarece un selector de clasă are o specificitate mai mare decât un selector de element.
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>
Selector de id
Se adaugă și un selector de id numit „demo”. Textul devine albastru, deoarece un selector de id are o specificitate mai mare atât decât selectorul de clasă, cât și decât selectorul de element.
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>
Stil inline
Acum, pe elementul <p> se află un stil inline. Textul devine roz, deoarece nicio specificitate nu este mai mare decât cea a unui stil inline.
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>