Arv av CSS-egenskaper
Låt oss säga att vi har ett stycke, och i det någon
text i taggen i:
<p>
This is some <i>text</i> in paragraph.
</p>
Låt oss färga stycken i rött:
p {
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å:
<p>
This is some <i>text</i> in paragraph.
</p>
p {
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:
<p>
This is some <i>text</i> in paragraph.
</p>
i {
color: blue;
}
p {
color: red;
}
:
Efter att ha studerat koden, säg vilken färg texten
i taggen b kommer att ha:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
Efter att ha studerat koden, säg vilken färg texten
i taggen b kommer att ha:
<p>
This is some <b>text</b> in paragraph.
</p>
p {
color: blue;
}
b {
color: red;
}
Efter att ha studerat koden, säg vilken färg texten
i taggen b kommer att ha:
<p>
This is some <b>text</b> in paragraph.
</p>
b {
color: red;
}
p {
color: blue;
}
Efter att ha studerat koden, säg vilken färg texten
i taggen li kommer att ha:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
Efter att ha studerat koden, säg vilken färg texten
i taggen li kommer att ha:
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
Efter att ha studerat koden, säg vilken färg texten
i taggen i kommer att ha:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
ul {
color: blue;
}
li {
color: red;
}
i {
color: green;
}
Efter att ha studerat koden, säg vilken storlek texten
i taggen i kommer att ha:
<ul>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
<li>text <i>italic</i> text</li>
</ul>
i {
font-size: 30px;
}
ul {
font-size: 20px;
}
li {
color: red;
font-weight: bold;
}
