в соответствии со специфичностью селекторов, селекторы типов имеют приоритет в 1 единицу, классов 10 единиц, айдишников 100 единиц;
Ниже пример, почему у абзаца цвет красный?, ведь специфичность суммируется, и получается у второго стиля специфичность равна 101, а у первого 100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
#x {
color: red;
}
.a .b .c .d .e .f .g .h .i .j p {
color: blue;
}
</style>
</head>
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<p id="x">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi dignissimos officia cupiditate omnis et mollitia id earum, ratione minima deleniti nam doloremque aspernatur ad distinctio velit quia ab eos quo?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Простой
Средний