CSS-egenskapsval

Sätt stil på HTML-element med specifika attribut

Vi kan sätta stil på HTML-element med specifika attribut eller attributvärden.

CSS [attribute] väljare

[attribute]-väljare används för att välja element med specifikt attribut.

I följande exempel väljs alla <a>-element med attributet target;

Exempel

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

Prova det själv

CSS [attribute="value"]-väljare

[attribute="value"]-väljare används för att välja element med specifikt attribut och värde.

I följande exempel väljs alla <a>-element med attributet target="_blank":

Exempel

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

Prova det själv

CSS [attribute~="value"]-väljare

[attribute~="value"]-väljare väljer element med attributvärde som innehåller specifikt ord.

I följande exempel väljs alla element med title-egenskapen som innehåller ordet "flower":

Exempel

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

Prova det själv

Ovanstående exempel kommer att matcha följande attributelement: title="flower"、title="summer flower" samt title="flower new". Det matchar inte: title="my-flower" eller title="flowers".

CSS [attribute|="value"]-väljare

[attribute|="value"]-väljare används för att välja element med specifikt attribut och värde som börjar med angivet värde.

I detta exempel väljs alla element som har en class-attribut som börjar med "top":

Kommentar:Värdet måste vara ett helt eller enskilt ord, till exempel class="top" eller följt av ett bindestreck, till exempel class="top-text".

Exempel

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

Prova det själv

CSS [attribute^="value"]-väljare

[attribute^="value"]-väljare används för att välja element som har ett attribut som börjar med det specificerade värdet.

I detta exempel väljs alla element som har en class-attribut som börjar med "top":

Tips:Värdet behöver inte vara ett helt ord!

Exempel

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

Prova det själv

CSS [attribute$="value"]-väljare

[attribute$="value"]-väljare används för att välja element som har ett attribut som slutar med det specificerade värdet.

I detta exempel väljs alla element som har en class-attribut som slutar med "test":

Tips:Värdet behöver inte vara ett helt ord!

Exempel

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

Prova det själv

CSS [attribute*="value"]-väljare

[attribute*="value"]-väljaren väljer element som har ett attributvärde som innehåller det specificerade ordet.

I detta exempel väljs alla element som har en class-attribut som innehåller "te":

Tips:Värdet behöver inte vara ett helt ord!

Exempel

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

Prova det själv

Ställ in formulärstyle

Om du behöver ställa in style för formulär utan class eller id är egenskapsval mycket användbart:

Exempel

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

Prova det själv

Tips:Besök vår CSS-formulär教程，Lär dig mer om hur du använder CSS för att ställa in formulärstyle.

Alla CSS-egenskapsval

Väljare Exempel Exempelbeskrivning
[attribute] [target] Välj alla element som har ett target-attribut.
[attribute=value] [target=_blank] Välj alla element som har ett target="_blank"-attribut.
[attribute~=value] [title~=flower] Välj alla element som har en title-attribut som innehåller ordet "flower".
[attribute|=value] [lang|=en] Välj alla element som har en lang-attribut som börjar med "en".
[attribute^=value] a[href^="https"] Välj varje <a>-element som har en href-attributvärde som börjar med "https".
[attribute$=value] a[href$=".pdf"] Välj varje <a>-element som har en href-attributvärde som slutar med ".pdf".
[attribute*=value] a[href*="codew3c"] Välj varje <a>-element som har ett href-egenskap som innehåller understrängen "codew3c".

Fortsätt läsa

Extrabok:CSS attributväljare detaljer