Ereditarietà delle proprietà CSS

Supponiamo di avere un paragrafo, e al suo interno del testo nel tag i:

html<p>
  Questo è del <i>testo</i> in un paragrafo.
</p>

Coloriamo i paragrafi in rosso:

cssp {
  color: red;
}

Di conseguenza, non solo si colorerà il testo del paragrafo, ma anche il testo del tag i:

Il punto è che la proprietà color è ereditata. Ciò significa che se al tag genitore è assegnato un certo colore, quel colore sarà anche per i discendenti. Non tutte le proprietà CSS sono ereditate, ma molte (di quelle che conosci già - tutte sono ereditate).

Tuttavia, se lo si desidera, è possibile sovrascrivere la proprietà del genitore, impostando un selettore per il discendente. Ad esempio, assegniamo al paragrafo il colore rosso e al corsivo il colore blu:

html<p>
  Questo è del <i>testo</i> in un paragrafo.
</p>

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

Результат:

L'ordine dei selettori nel codice CSS in questo caso non ha importanza. Se si scambiano il selettore i e il selettore p, tutto funzionerà allo stesso modo:

html<p>
  Questo è del <i>testo</i> in un paragrafo.
</p>

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

Результат:

Задание 1

Studiando il codice, dite di che colore sarà il testo nel tag b:

html<p>
  Questo è del <b>testo</b> in un paragrafo.
</p>

cssp {
  color: blue;
}

Задание 2

Studiando il codice, dite di che colore sarà il testo nel tag b:

html<p>
  Questo è del <b>testo</b> in un paragrafo.
</p>

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

Задание 3

Studiando il codice, dite di che colore sarà il testo nel tag b:

html<p>
  Questo è del <b>testo</b> in un paragrafo.
</p>

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

Задание 4

Studiando il codice, dite di che colore sarà il testo nel tag li:

html<ul>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ul>

cssul {
  color: blue;
}

Задание 5

Studiando il codice, dite di che colore sarà il testo nel tag li:

html<ul>
  <li>testo</li>
  <li>testo</li>
  <li>testo</li>
</ul>

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

Задание 6

Studiando il codice, dite di che colore sarà il testo nel tag i:

html<ul>
  <li>testo <i>corsivo</i> testo</li>
  <li>testo <i>corsivo</i> testo</li>
  <li>testo <i>corsivo</i> testo</li>
</ul>

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

Задание 7

Studiando il codice, dite che dimensione avrà il testo nel tag i:

html<ul>
  <li>testo <i>corsivo</i> testo</li>
  <li>testo <i>corsivo</i> testo</li>
  <li>testo <i>corsivo</i> testo</li>
</ul>

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