Innehållsförteckning:
Video: How to speed up your wordpress site 2019 2024
CSS3 stöder flera nya selektörer med intressanta nya funktioner som du ska bli bekanta med. Du kan använda dessa nya funktioner för att förbättra sidorna på ännu bättre sätt än tidigare.
Attributsval
Du kan nu tillämpa en stil på ett element med ett specifikt attributvärde. Inmatningstaggen tar till exempel olika former, alla bestämda av typattributet. Om du tillämpar en enda stil på inmatningselementet, tillämpas den här stilen på många olika elementstyper: kryssrutor, textfält och radioknappar. Genom att använda den nya attributsyntaxen kan du tillämpa en stil på något inmatningselement:
inmatning [typ = "text"] {bakgrundsfärg: #CCCCFF;}
Du kan tillämpa stilen med eller utan taggstyp, men det är möjligt att få oväntade biverkningar om du väljer ett extremt vanligt attribut.
inte
Det finns tillfällen du vill ha ett inverst urval. Tänk dig att du ville tillämpa en stil på alla punkter som inte är medlemmar i specialklassen:
p: inte (. Special) {border: 1px solid red;}
nth-barn
Med nth-barnväljaren kan du välja ett eller flera element i en grupp. Den grundläggande versionen använder en numerisk ingång:
#myList> li: nth-child (1) {border: 1px solid blue;}
Detta låter dig applicera en stil till den första av en grupp av element. I exemplet finns en lista med fyra objekt. Stilen tillämpas på listobjekten, inte listan.
Det numeriska värdet kan faktiskt vara en formel, som en + b. Om du älskar algebra (och vem som inte?) Kan du välja alla lika antal element som följande:
#myList> li: nth-child (2n) {border: 1px solid blue;}
En liknande formel kan användas för att välja de udda nummererade barnen.
#myList> li: nth-child (2n + 1) {border: 1px solid blue;}
Du kan använda det här formelsystemet för att få alla slags grupperingar, men de flesta behöver helt enkelt ett visst element, eller alla jämna eller udda rader. CSS3 levererar genvägs nyckelord, jämn och udda, så du behöver inte göra det med matematik:
#myList> li: nth-child (even) {färg: vit; bakgrundsfärg: röd;}
Med sökordet kan du välja det sista elementet från en grupp. Det finns några fler variationer av denna urvalsmetod:
-
: nth-sista-barnet (N) : Fungerar precis som nth-barn, utom räknat från slutet av gruppen av element i stället för början.
-
: nth-of-type (N) : Den här väljaren fungerar precis som nth-barn, förutom att den filtrerar till en viss typ och ignorerar element som inte är av exakt samma typ av elementet.
-
sista barnet : Detta (naturligtvis nog) väljer det sista barnelementet.
-
sista n: a av typen (N) : Fungerar som nth-of-type, men från slutet av gruppen.
-
första barnet : Tar det första elementet (tekniskt var det tillgängligt i CSS2, men det användes sällan).
Dessa valverktyg stöds fullt ut i alla nya webbläsare. Men eftersom de vanligtvis används för att förbättra läsbarheten, bör det vara säkert att använda dem. Äldre webbläsare hoppa helt enkelt över stilen.
Andra nya pseudoklasser
Pseudoklasser gör att du kan ange stilar baserade på elementets tillstånd. Modern CSS stöder ett antal nya pseudoklasser:
-
: svävar : Den: svängpseudoklassen har varit en del av CSS från början men det var officiellt definierat endast för taggen. Nu kan svängpseudoklassen appliceras på något element. Om musen är över ett element, har det här elementet tillståndet aktiverat. Observera att mobila enheter inte alltid stöder eftersom pekdonets position inte är känd tills objektet är aktiverat.
-
: fokus : Den: pseudoklassen fokuseras när ett element är klart för att ta emot tangentbordsinmatning.
-
: aktiv : Ett formelement är aktivt när det används för tillfället, till exempel när en knapp har tryckts men ännu inte släppts. Mobila enheter släpper ofta direkt till aktivt läge utan att gå igenom svängläget. Detta kan vara en viktig designhänsyn när du använder tillstånd för styling.
Statens pseudoklasser stöds fullt ut av alla moderna webbläsare utom IE-familjen i webbläsare. Det finns begränsat men buggy stöd i jämna tidiga versioner av IE.
