Arv av CSS-egenskaper

Låt oss säga att vi har ett stycke, och i det någon text i taggen i:

html<p>
  This is some <i>text</i> in paragraph.
</p>

Låt oss färga stycken i rött:

cssp {
  color: red;
}

Som ett resultat kommer inte bara styckets text att färgas, utan också texten i taggen i:

Anledningen är att egenskapen color ärvs. Det betyder att om en föräldertagg har en viss färg, kommer barnen att ha samma färg. Inte alla CSS-egenskaper ärvs, men många (av de du redan känner till - alla ärvs).

Om så önskas kan man dock åsidosätta förälderns egenskap genom att ange en barnselektor. Till exempel, låt oss ge stycket röd färg och kursiv text - blå:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssp {
  color: red;
}
i {
  color: blue;
}

Результат:

Ordningen på selektorerna i CSS-koden har i sådant fall ingen betydelse. Om man byter plats på selektorn i och selektorn p kommer allt att fungera på samma sätt:

html<p>
  This is some <i>text</i> in paragraph.
</p>

cssi {
  color: blue;
}
p {
  color: red;
}

Результат:

Задание 1

Efter att ha studerat koden, säg vilken färg texten i taggen b kommer att ha:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}

Задание 2

Efter att ha studerat koden, säg vilken färg texten i taggen b kommer att ha:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssp {
  color: blue;
}
b {
  color: red;
}

Задание 3

Efter att ha studerat koden, säg vilken färg texten i taggen b kommer att ha:

html<p>
  This is some <b>text</b> in paragraph.
</p>

cssb {
  color: red;
}
p {
  color: blue;
}

Задание 4

Efter att ha studerat koden, säg vilken färg texten i taggen li kommer att ha:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Efter att ha studerat koden, säg vilken färg texten i taggen li kommer att ha:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}

Задание 6

Efter att ha studerat koden, säg vilken färg texten i taggen i kommer att ha:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssul {
  color: blue;
}
li {
  color: red;
}
i {
  color: green;
}

Задание 7

Efter att ha studerat koden, säg vilken storlek texten i taggen i kommer att ha:

html<ul>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
  <li>text <i>italic</i> text</li>
</ul>

cssi {
  font-size: 30px;
}
ul {
  font-size: 20px;
}
li {
  color: red;
  font-weight: bold;
}