css Vererbung unterbinden
bearbeitet von LinuchsMoin,
ich habe Formulare in Form von `<table>`, für die ich die Spalten per CSS einrichte.
Innerhalb des Formulars gibt es Felder, die sich während des Tippens Vorschläge per Ajax holen.
Nun blende ich die Vorschläge als `<table class="t_ajax">` ein und möchte die Spalten unabhängig von der übergeordneten Tabelle definieren.
Die übergeordnete Tabelle hat z.B. `tr>td:nth-of-type(2){text-align:center}` und die t_ajax-Tabelle ausdrücklich `tr>td:nth-of-type(2){text-align:left!important}`, das wird aber ignoriert und vom FF-Inspektor nichtmal angezeigt.
Die übergeordnete Tabelle ist im HTML-Dokument definiert, die t_ajax in der **anschließend** geladenen basis.css - von daher müssten doch die später definierten Werte auch ohne `!important` Vorrang haben?
~~~
<style>
table.tp502 tr>td:nth-of-type(2) { /* Pflichtfeld */
width: 0.5em;
text-align: center;
color: #f00;
font-size: 120%;
font-weight: bold;
}
...
</style>
<link rel=stylesheet href="css/basis.css">
~~~
Datei basis.css:
~~~
/* Tabelle in p502, p504 mit Vorschlagswerten aus ajax_getTreffpunkte.js 2019-03-18 */
table.t_ajax {
all: initial;
}
table.t_ajax tr>td:nth-of-type(1) {
text-align: right!important;
}
table.t_ajax tr>td:nth-of-type(3) {
text-align: left!important;
color: inherit!important;
}
~~~
auch `initial` setzt die Werte nicht zurück.
Wie kann ich die untergeordnete Tabelle von Vererbung befreien?
Gruß, Linuchs