Ich weiß, dass ich auf Elemente abzielen kann, die in CSS ein bestimmtes Attribut haben, zum Beispiel:
input[type=text]
{
font-family: Consolas;
}
Aber ist es möglich, Elemente anzuvisieren, die ein Attribut mit einem beliebigen Wert haben (außer nichts, dh wenn das Attribut dem Element nicht hinzugefügt wurde)?
Etwa so etwas wie:
a[rel=*]
{
color: red;
}
Welches sollte auf das erste und dritte <a>Tag in diesem HTML abzielen :
<a href="#" rel="eg">red text</a>
<a href="#">standard text</a>
<a href="#" rel="more">red text again</a>
Ich denke, es ist möglich, weil es standardmäßig cursor: pointerauf jedes <a>Tag angewendet wird, dessen hrefAttribut einen Wert hat .
css
css-selectors
Marty
quelle
quelle
emptya[rel]:not( [rel=""] )notTrick nicht dynamisch. Ich habe versucht,inputFelder hervorzuheben , wenn sie Werte hatten, oder wenn sie keine Werte hatten, und es scheint, dass der Stil nach dem Laden der Seite nicht neu bewertet wird, wenn ein Wert eingegeben wird (oder wenn er von Anfang an vorhanden ist) und es ist entfernt).Ja, in CSS 3-Selektoren gibt es mehrere Attributselektoren .
Z.B
quelle
Sollte hinzugefügt werden, dass Sie möglicherweise umgehen müssen, wenn ein Browser standardmäßig ein Attribut festlegt. Dies scheint bei "modernen" Browsern kein Problem zu sein. Dies ist jedoch ein Problem, das ich gesehen habe. Überprüfen Sie daher unbedingt die browserübergreifende Leistung.
Zum Beispiel habe ich festgestellt, dass in IE vor 9 colSpan für alle TDs in einer Tabelle festgelegt ist, sodass jede einzelne Zelle den versteckten colspan-Wert 1 hat.
Wenn Sie also auf "TD mit Colspan-Attribut" abzielen, das Sie in Ihrem Webdoc anwenden, erhalten auch die TDs, für die kein Colspan-Attribut festgelegt ist, wie z. B. ein TD, das eine einzelne Zelle ist, das CSS-Format. IE weniger als 9 wird sie im Grunde alle stylen!
Der einzige Grund zur Sorge sind alle verbleibenden XP-Benutzer, die kein Upgrade über IE8 durchführen können.
So habe ich zum Beispiel eine Gruppe von Tabellen, in denen sich der Inhalt von Ende zu Ende verschieben kann, wobei entweder am Ende oder am Anfang 1 bis 7 Zellen leer bleiben.
Ich möchte eine leere Farbe am Ende oder am Anfang mit dem Colspan-Attribut mit einer Farbe versehen. Die Verwendung der folgenden Funktionen funktioniert nicht in IE unter 9
#my td[colspan] {background-color:blue;}... alle TDs werden gestylt (lustig, da das bedingte Attribut-Styling im IE angeblich überlegen war, aber ich schweife ab ...).
Die Verwendung der folgenden Funktionen funktioniert in allen Browsern, wenn ich den Wert von colspan für eine einzelne Zelle / TD, die ich in das Styling-Schema aufnehmen möchte, auf "single" setze. Dies ist jedoch ein "Hack" und wird nicht ordnungsgemäß validiert ...
#my td[colspan="single"] {background-color:blue;} /* 'single' could be anything */ #my td[colspan="2"] {background-color:blue;} #my td[colspan="3"] {background-color:blue;} #my td[colspan="4"] {background-color:blue;} #my td[colspan="5"] {background-color:blue;} #my td[colspan="6"] {background-color:blue;} #my td[colspan="7"] {background-color:blue;}Alternativ sollten Sie in der Lage sein, das Problem mithilfe des bedingten Stils mit "if lt IE 9" angemessener zu beheben, um es zu überschreiben. Es wäre der richtige Weg, dies zu tun. Denken Sie jedoch daran, dass Sie dabei das "richtig konstruierte CSS" vor IElt9 verbergen müssen, und ich denke, der einzig richtige Weg, dies zu tun, sind selektive Stylesheets.
Die meisten von uns tun dies ohnehin schon, aber Sie sollten trotzdem prüfen und testen, ob ein Browser ein Auto-Attribut anwendet, wenn es keines sieht, und wie er mit Ihrer ansonsten korrekten Syntax für das Styling von Attributwerten umgehen kann.
(Übrigens befindet sich colspan noch nicht in der CSS-Spezifikation [ab CSS3], daher gibt dieses Beispiel keinen Validierungsfehler aus.)
quelle