Detaljerad förklaring av CSS egenskapsväljare

CSS 2 introducerade egenskapsselektorer.

Egenskapsselektorer kan användas för att välja element baserat på deras egenskaper och egenskapsvärden.

Enkel egenskapsselektor

Om du vill välja element med en viss egenskap utan att bry sig om egenskapsvärdet, kan du använda en enkel egenskapsselektor.

Exempel 1

Om du vill göra alla element som innehåller en titel (title) röda, kan du skriva:

*[title] {color:red;}

Prova själv

Exempel 2

Liknande ovan, kan du tillämpa stilar endast på ankar (a-element) med href-egenskapen:

a[href] {color:red;}

Prova själv

Exempel 3

Det är möjligt att välja baserat på flera egenskaper, det räcker att länka egenskapsselektorn tillsammans.

Till exempel, för att sätta texten för HTML-hyperlänkar som har både href- och title-egenskaper till röd, kan du skriva så här:

a[href][title] {color:red;}

Prova själv

Exempel 4

Man kan använda några kreativa sätt att använda denna egenskap.

Till exempel kan du tillämpa stilar på alla bilder med alt-egenskapen för att betona dessa effektiva bilder:

img[alt] {border: 5px solid red;}

Prova själv

Tips:Denna speciella fallstudie är mer lämplig för diagnostik än design, dvs. för att fastställa om en bild verkligen är effektiv.

Exempel 5: Använda egenskapsvalare i XML-dokument

Egenskapsvalare är mycket användbara i XML-dokument eftersom XML-språket förespråkar att element- och attributnamn specificeras för användningen av element och attribut.

Anta att vi har designat ett XML-dokument för att beskriva planet i solsystemet. Om vi vill välja alla planet-element med moons-egenskapen och visa dem i röd färg för att betona planet med mån, kan vi skriva så här:

planet[moons] {color:red;}

Detta kommer att visa texten för den andra och tredje elementen i följande taggfragment i röd, men texten för det första elementet är inte röd:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Se effekten

Val baserat på specifika egenskapsvärden

Förutom att välja element med vissa egenskaper kan du också begränsa valet ytterligare, endast välja element med specifika egenskapsvärden.

Exempel 1

Till exempel, anta att du vill göra en hyperlänk som pekar på en specifik dokument på en webbserver röd, kan du skriva så här:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Prova själv

Exempel 2

Liksom med enkla egenskapsvalare kan du länka flera egenskaps-värdesvalare för att välja en dokument.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Detta kommer att ändra texten för den första hyperlänken i följande tagg till röd, men den andra eller tredje länken påverkas inte:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Prova själv

Exempel 3

På samma sätt kan XML-språket också använda detta sätt att sätta stil.

Låt oss återvända till exempel med planet. Anta att man bara vill välja planet-element med moons-attributvärdet 1:

planet[moons="1"] {color: red;}

Ovanstående kod kommer att göra att den andra elementet i följande markering blir rött, men det första och tredje elementen påverkas inte:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Se effekten

Egenskap och egenskapsvärde måste matcha helt

Observera att detta format kräver att det måste matcha egenskapsvärdet helt.

Om egenskapsvärdet innehåller en värdest lista separerad med blanksteg, kan matchningen ge problem.

Överväg följande markeringssnitt:

<p class="important warning">Denna mening är en mycket viktig varning.</p>

Om man skriver p[class="important"], så kan denna regel inte matcha exempelmarkeringen.

För att välja element baserat på specifikt egenskapsvärde måste man skriva så här:

p[class="important warning"] {color: red;}

Prova själv

Baserat på delvis egenskapsvärdesvalare

Om man behöver välja baserat på en ordlista i egenskapsvärdet, måste man använda vågspetsen (~).

Om du vill välja element som innehåller class-attributet important, kan du använda följande valare för detta:

p[class~="important"] {color: red;}

Prova själv

Om man ignorerar vågspetsen, betyder det att man behöver fullvärdematchning.

Skillnaden mellan delvis värde egenskapsvalare och punktclass-minne

Denna valare är ekvivalent med den punktclass-minne vi diskuterade i klassvalare.

Detta innebär att p.important och p[class="important"] är likvärdiga när de tillämpas på HTML-dokument.

Så varför behöver vi "~="-valaren? Eftersom den kan användas för alla egenskaper, inte bara class.

Till exempel, kan det finnas ett dokument med ett stort antal bilder, där bara en del är bilder. För detta kan man använda en delvis baserad på title-dokumentets egenskaper valare, för att bara välja dessa bilder:

img[title~="Figure"] {border: 1px solid gray;}

Denna regel väljer alla bilder där titeltexten innehåller "Figure". Bilder utan titel eller där titeltexten inte innehåller "Figure" matchar inte.

Prova själv

Delvärdesegenskapsselektor

Låt oss nu presentera en mer avancerad selektormodul som släpptes efter att CSS2 var färdigutvecklad. Den innehåller fler delvärdesegenskapsselektorer. Enligt normen bör den kallas "delvärdesegenskapsselektor".

Många moderna webbläsare stöder dessa selektorer, inklusive IE7.

Följande tabell ger en enkel sammanfattning av dessa selektorer:

Typ Beskrivning
[abc^="def"] Välj alla element där abc-egenskapsvärdet börjar med "def".
[abc$="def"] Välj alla element där abc-egenskapsvärdet slutar med "def".
[abc*="def"] Välj alla element där abc-egenskapsvärdet innehåller understrängen "def".

Man kan tänka sig att dessa har många användningsområden.

För att till exempel tillämpa stilar på alla länkar som pekar på CodeW3C.com, behöver du inte specificera en class för alla dessa länkar och skriva style-regler baserat på denna klass. Du behöver bara skriva följande regel:

a[href*="codew3c.com"] {color: red;}

Prova själv

Tips:Varje egenskap kan använda dessa selektorer.

Specifik egenskapsselektor

Låt oss nu presentera den specifika egenskapsselektorn. Se exempel nedan:

*[lang|="en"] {color: red;}

Regeln ovan väljer alla element med lang-egenskapen som är lika med en eller börjar med en-.

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Prova själv

Generellt kan [att|="val"] användas för alla egenskaper och deras värden.

Anta att en HTML-dokument innehåller en rad bilder, där varje bilds filnamn är av formen figure-1.jpg och figure-2.jpgDå kan du använda följande selektor för att matcha alla dessa bilder:

img[src|="figure"] {border: 1px solid gray;}

Prova själv

Naturligtvis är den vanligaste användningen av denna egenskapsselektor att matcha språkvärden.

CSS väljare referenshandbok

Väljare Beskrivning
[attribute] Används för att välja element som har en specifik egenskap.
[attribute=value] Används för att välja element som har en specifik egenskap och värde.
[attribute~=value] Används för att välja element som innehåller det specificerade ordet i egenskapsvärdet.
[attribute|=value] Används för att välja element som har en egenskapsvärde som börjar med det specificerade värdet, och värdet måste vara en hel ord.
[attribute^=value] Matchar varje element där egenskapsvärdet börjar med det specificerade värdet.
[attribute$=value] Matchar varje element där egenskapsvärdet slutar med det specificerade värdet.
[attribute*=value] Matchar varje element som innehåller den specificerade värdet i egenskapsvärdet.