Wie ziele ich auf Elemente mit einem Attribut ab, das in CSS einen Wert hat?

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 .

Folgendes passt zu jedem Ankertag mit einem reldefinierten Attribut:

a[rel]
{
    color: red;
}

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Update: Um das erwähnte Szenario @vsync zu berücksichtigen, können Sie im Kommentarbereich (Unterscheidung zwischen leeren / nicht leeren Werten) die CSS :not - Pseudoklasse einbinden :

a[rel]:not([rel=""])
{
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Ja, in CSS 3-Selektoren gibt es mehrere Attributselektoren .

Z.B

[att] Stellt ein Element mit dem Attribut att dar, unabhängig vom Wert des Attributs.

[att = val] Stellt ein Element mit dem Attribut att dar, dessen Wert genau "val" ist.

[att ~ = val] Stellt ein Element mit dem Attribut att dar, dessen Wert eine durch Leerzeichen getrennte Liste von Wörtern ist, von denen eines genau "val" ist. Wenn "val" Leerzeichen enthält, wird es niemals etwas darstellen (da die Wörter durch Leerzeichen getrennt sind). Auch wenn "val" die leere Zeichenfolge ist, wird sie niemals etwas darstellen.

[att ^ = val] Stellt ein Element mit dem Attribut att dar, dessen Wert mit dem Präfix "val" beginnt. Wenn "val" die leere Zeichenfolge ist, repräsentiert der Selektor nichts.

[att $ = val] Stellt ein Element mit dem Attribut att dar, dessen Wert mit dem Suffix "val" endet. Wenn "val" die leere Zeichenfolge ist, repräsentiert der Selektor nichts.

[att * = val] Stellt ein Element mit dem Attribut att dar, dessen Wert mindestens eine Instanz des Teilstrings "val" enthält. Wenn "val" die leere Zeichenfolge ist, repräsentiert der Selektor nichts.

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.)