Herança de propriedades CSS

Suponha que temos um parágrafo e dentro dele algum texto na tag i:

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

Vamos colorir os parágrafos em vermelho:

cssp {
  color: red;
}

Como resultado, não apenas o texto do parágrafo será colorido, mas também o texto da tag i:

Tudo se deve ao fato de que a propriedade color é herdada. Isso significa que se a tag pai tiver uma cor definida, essa cor será aplicada aos descendentes. Nem todas as propriedades CSS são herdadas, mas muitas são (das que você já conhece - todas são herdadas).

No entanto, se desejar, é possível sobrescrever a propriedade do pai, definindo um seletor para o descendente. Por exemplo, vamos definir a cor vermelha para o parágrafo e azul para o itálico:

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

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

Результат:

Nesse caso, a ordem dos seletores no código CSS não importa. Se trocarmos o seletor i e o seletor p de lugar, tudo funcionará da mesma forma:

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

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

Результат:

Задание 1

Estudando o código, diga qual cor o texto na tag b terá:

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

cssp {
  color: blue;
}

Задание 2

Estudando o código, diga qual cor o texto na tag b terá:

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

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

Задание 3

Estudando o código, diga qual cor o texto na tag b terá:

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

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

Задание 4

Estudando o código, diga qual cor o texto na tag li terá:

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

cssul {
  color: blue;
}

Задание 5

Estudando o código, diga qual cor o texto na tag li terá:

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

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

Задание 6

Estudando o código, diga qual cor o texto na tag i terá:

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

Estudando o código, diga qual tamanho o texto na tag i terá:

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;
}