Тема: Важливість селекторів
Я створив простий демонстраційний код, важливості селекторів, на основі Основи Web UI розробки.
Якщо вам потрібно, то ось
<!DOCTYPE html>
<html>
<head>
<title>The important of the selector</title>
<link charset="UTF-8"/>
<!--Begin debugging-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<!--End debugging-->
<style type="text/css">
p {
color: Fuchsia;
}
.classStyle {
color: Lime;
}
#idStyle {
color: Red;
}
.classStyleImportant{
color: Teal !important;
}
</style>
</head>
<body>
<dl>
<dt>Color styles</dt>
<dd>
<table>
<thead>
<tr>
<th>Style type</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Browser default style - </td>
<td><font color="Black">Black</font></td>
</tr>
<tr>
<td>Tag style - </td>
<td><font color="Fuchsia">Fuchsia</font></td>
</tr>
<tr>
<td>Class/pseudo, class/attribute - </td>
<td><font color="Lime">Lime</font></td>
</tr>
<tr>
<td>ID style - </td>
<td><font color="Red">Red</font></td>
</tr>
<tr>
<td>inline-style - </td>
<td><font color="Blue">Blue</font></td>
</tr>
<tr>
<td>Important style - </td>
<td><font color="Teal">Teal</font></td>
</tr>
</tbody>
</table>
</dd>
<dt>Demonstration</dt>
<dd>
<p>It is browser default style. Its importance is equal to zero. +0<p>
<p>It is tag style. Its importance is equal to one. +1<p>
<p class="classStyle">It is class/pseudo, class/attribute. Its importance is equal to ten. +10<p>
<p class="classStyle" id="idStyle">It is ID style. Its importance is equal to hundred. +100<p>
<p class="classStyle" id="idStyle" style="color: Blue;">It is inline-style. Its importance is equal to thousand. +1000<p>
<p class="classStyleImportant" id="idStyle" style="color: Blue;">It is important style. Its importance is equal to infinity. +∞<p>
</dd>
</dl>
</body>
</html>Від найменш важливих до найбільш
Всі дефолтні (браузерні)
Всі теги
Всі класи, псевдокласи, атрибути
Всі ідентифікатори
Всі вбудовані стилі
І найважливіші !important
До параграфів додано попередні стилі для демонстрації пріоритетності.
