» Forum » Programowanie » Inne języki

[CSS] Selector "Child combinator"

Ostatnio zmodyfikowano 2020-02-19 22:39

DejaVu

Temat założony przez niniejszego użytkownika

» 2020-02-19 22:39:40

Poniższe notatki zamieszczone ku pamięci.

Problem

Mając CSS:

table.Klasa > tr > td { color: red; }

oraz kod HTML:

<table class="Klasa"><tr><td>tekst</td></tr></table>

Nie jest zmieniany kolor tekstu.

Rozwiązanie poprawne

Poprawić CSS:

table.Klasa > tbody > tr > td { color: red; }

Rozwiązanie 'naciągane'

Zmodyfikować CSS:

table.Klasa tr > td { color: red; }

Naciągane rozwiązanie, ponieważ w praktyce każdy zagnieżdżony <td> w kolejnych tabelach dostanie ten styl (nawet jeżeli nie będzie posiadał klasy). Innymi słowy: można doświadczyć skutków ubocznych przy złożonych zagnieżdżeniach.

Rozwinięcie tematu

https://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements

Especially annoying when you're trying to apply CSS styles through child selector: table > tr > td. You have to either use a descendant selector: table tr > td, or if you really want to be strict, cater to both cases: table > tr > td, table > tbody > tr > td – ADTC Jul 24 '16 at 13:16

<html>

<head>
<style>
td
{
color: blue;
}
table.SecondTable > tbody > tr > td.FirstTd
{
color: red;
}
</style>
</head>
<body>
<table class="FirstTable"><tr><td class="FirstTd">Should-be-default (no match)

<table><tr><td>world</td></tr></table>

</td></tr></table>

<table class="SecondTable"><tr><td class="FirstTd">Should-be-custom (match)

<table><tr><td>world</td></tr></table>

</td></tr></table>

<table class="SecondTable"><tr><td>third

<table><tr><td class="FirstTd">Should-be-default (no match when tbody is defined in CSS)</td></tr></table>

</td></tr></table>
</body>
</html>

/edit:
Poniżej jeszcze trochę 'wypocin' na temat dostawiania znacznika 'tbody' przez przeglądarki:
https://stackoverflow.com/questions/938083/why-do-browsers-insert-tbody-element-into-table-elements

P-176256

« 1 »

Strona 1 z 1

» Forum » Programowanie » Inne języki