CSS egenskabsvælger

Sæt stil på HTML-elementer med specifikke egenskaber

Vi kan sætte stilen på HTML-elementer med specifikke egenskaber eller egenskabsværdier.

CSS [attribute] vælger

[attribute] -selector bruges til at vælge elementer med en specifik egenskab.

Følgende eksempel vælger alle <a>-elementer med egenskaben target;

Eksempel

a[target] {
  background-color: yellow;
}

Prøv det selv

CSS [attribute="value"]-selector

[attribute="value"]-selector bruges til at vælge elementer med en specifik egenskab og værdi.

Følgende eksempel vælger alle <a>-elementer med egenskaben target="_blank":

Eksempel

a[target="_blank"] { 
  background-color: yellow;
}

Prøv det selv

CSS [attribute~="value"]-selector

[attribute~="value"]-selector bruges til at vælge elementer med en egenskabsværdi, der indeholder det angivne ord.

Følgende eksempel vælger alle elementer med en title-egenskab, der indeholder ordet "flower":

Eksempel

[title~="flower"] {
  border: 5px solid yellow;
}

Prøv det selv

De ovenstående eksempler matcher følgende egenskabsværdier: title="flower"、title="summer flower" samt title="flower new". De matcher ikke: title="my-flower" eller title="flowers".

CSS [attribute|="value"]-selector

[attribute|="value"]-selector bruges til at vælge elementer med en specifik egenskab, der starter med den angivne værdi.

I dette eksempel vælges alle elementer med en class-attribut, der starter med "top":

Kommentarer:Værdien skal være en fuld eller enkelt ord, f.eks. class="top" eller efterfulgt af et bindestreg, f.eks. class="top-text".

Eksempel

[class|="top"] {
  background: yellow;
}

Prøv det selv

CSS [attribute^="value"] vælger

[attribute^="value"] vælger elementer, hvis attributværdi starter med den angivne værdi.

I dette eksempel vælges alle elementer med en class-attribut, der starter med "top":

Tip:Værdien behøver ikke at være en fuld ord!

Eksempel

[class^="top"] {
  background: yellow;
}

Prøv det selv

CSS [attribute$="value"] vælger

[attribute$="value"] vælger elementer, hvis attributværdi slutter med den angivne værdi.

I dette eksempel vælges alle elementer med en class-attribut, der slutter med "test":

Tip:Værdien behøver ikke at være en fuld ord!

Eksempel

[class$="test"] {
  background: yellow;
}

Prøv det selv

CSS [attribute*="value"] vælger

[attribute*="value"] vælger elementer, hvis attributværdi indeholder det angivne ord.

I dette eksempel vælges alle elementer med en class-attribut, der indeholder "te":

Tip:Værdien behøver ikke at være en fuld ord!

Eksempel

[class*="te"] {
  background: yellow;
}

Prøv det selv

Sæt formularstil

Hvis du skal sætte stil på en formular uden class eller id, er egenskabsvælgeren meget nyttig:

Eksempel

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Prøv det selv

Tip:Besøg vores CSS Formular教程Læs mere om, hvordan du bruger CSS til at sætte formularstilar på.

Alle CSS-egenskabsvælger

Vælger Eksempel Eksempelbeskrivelse
[attribute] [target] Vælg alle elementer med en target-egenskab.
[attribute=value] [target=_blank] Vælg alle elementer med en target-egenskab, der er "_blank".
[attribute~=value] [title~=flower] Vælg alle elementer med en title-egenskab, der indeholder ordet "flower".
[attribute|=value] [lang|=en] Vælg alle elementer med en lang-egenskab, der starter med "en".
[attribute^=value] a[href^="https"] Vælg hver <a>-element, hvis href-egenskab værdi starter med "https".
[attribute$=value] a[href$=".pdf"] Vælg hver <a>-element, hvis href-egenskab værdi ender med ".pdf".
[attribute*=value] a[href*="codew3c"] Vælg hver <a> element, hvis href egenskab indeholder understreng "codew3c".

Udvidet læsning

Ekstrabog:CSS egenskabsvælger detaljeret