CSS selektorer. typer af vælgere

, som hver især du vil indstille en bestemt farve. Hvordan man gør det? Standard CSS selektorer er ikke egnet til tags, de angiver parametrene for alle blokke på én gang. Løsningen er simpel. Tildel gruppemedlemmer. For eksempel er den første modtog div class = 'rød', sekund - class = 'blå', tredje - class = 'grønne'. Nu kan de vælges med CSS tabeller.

Syntaksen er som følger: Angiver et punkt ( ""), efterfulgt af at skrive navnet på klassen. For at styre den første enhed, skal du bruge konstruktionen .RED. Anden - .Blue og så videre.

Vigtigt! Det anbefales at bruge meningsfulde værdier af klassen attribut. Det anses for dårlig form, for at bruge translitteration (fx krasiviy-blok) eller tilfældige kombinationer af bogstaver / tal (ojfh834871). I denne kode, er du forpligtet til at blive forvirret, for ikke at nævne de vanskeligheder, der står over for dem, der vil blive engageret i projektet efter dig. Den bedste mulighed - for at bruge en hvilken som helst metode, såsom BEM.

Fordele - relativ høj fleksibilitet.

Ulemper - de multiple elementer kan være en og samme klasse, hvilket betyder, at de vil blive redigeret samtidigt. Problemet er løst ved hjælp af den metode samt arv af præprocessorer. Vær sikker på at få dine hænder mindre, Sass eller en anden præprocessor, de i høj grad forenkle arbejdet.

ID selector

Om denne version meningsdannere kodere og programmører er tvetydige. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Nogle CSS tutorials anbefaler ikke brug af id, fordi i unøjagtig ansøgning, de kan forårsage problemer med arv. Men mange eksperter er aktivt arrangere dem i hele layoutet. Du bestemmer. # »), затем имя блока. Syntaksen er som følger: pund tegn ( "#"), derefter navnet på blokken. #red. For eksempel #Red.

отличается от класса по нескольким параметрам. ID er forskellig fra klassen på flere måder. ID. For det første kan den side ikke være to ens id. De er tildelt et unikt navn. For det andet, sådan en vælger har en højere prioritet. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Det betyder, at hvis du angiver en enhed klasse rød og i CSS tabeller angiver rød baggrundsfarve, og derefter tildele det samme id blå og angive farven blå, vil enheden blive blå.

Fordele - du kan styre det specifikke element, ignorerer stilarter af tags og klasser.

ID и class. Ulemper - let at fare vild i et stort antal af ID og klasse.

Vigtigt! ID вам, в общем-то, не нужны. Hvis du bruger BEM metode (eller dets analoger), ID til dig, i almindelighed, er ikke nødvendig. Denne teknik indebærer anvendelse af layout unikke klasser, der langt mere bekvem.

universel vælgeren

{}. Syntaks: Starlets tegn ( "*") og seler, dvs. {*} ...

Bruges til at tildele visse egenskaber, når alle elementer på siden. Når dette kan være nyttigt? box-sizing: border-box. For eksempel, hvis du ønsker at indstille sideegenskab box-dimensionering: border-box. div *{}. Kan ikke kun bruges til at styre alle dele af dokumentet, men også til at styre alle børn af den angivne blok, for eksempel, div * {}.

Fordele - du kan styre et stort antal elementer ad gangen.

Ulemper - ikke nok fleksibel løsning. Hertil kommer, at brugen af denne vælger, i nogle tilfælde bremse side arbejde.

af attributter

Gør det muligt at styre elementet med en bestemt egenskab. For eksempel har du en række input-tags med en anden attribut type. En af dem - tekst, den anden - password, den tredje - nummer. Selvfølgelig kan du indstille hver klasse eller id, men det er ikke altid praktisk. CSS selektorer af egenskaber gør det muligt at angive værdier for visse tags med maksimal præcision. For eksempel sådan her:

input [typen = 'tekst'] {}

Denne vælgeren vil vælge alle attributter med den type indtaste tekst.

Værktøjet er ganske fleksibel og kan anvendes med enhver af mærkerne, hvor der kan være attributter. Men det er ikke alt! CSS specifikation har evnen til at kontrollere de elementer med endnu mere komfort!

Forestil dig, at din side har indgang med attributten pladsholder = "Indtast et navn" og input pladsholder = "Indtast adgangskode". De kan også vælges ved hjælp af vælgeren! For at gøre dette, skal du bruge følgende struktur:

input [pladsholder = "Indtast navnet"] {} eller input [pladsholder = "Indtast adgangskoden"]

Måske mere fleksibelt arbejde med attributter. Lad os sige, du har en række af tags med lignende attributter titel (for eksempel "Caspian" og "Caspian"). For at vælge begge dele, skal du bruge følgende valg:

[Title * = "Kaspijsk"]

CSS vil vælge alle elementer i titlen som der er symboler på "Caspian", dvs.. E. og "Caspian" og "Caspian".

Du kan også vælge tags, der begynder med et bestemt tegnattributter:

[Title ^ = "tegn, du ønsker"] {}

eller opsige dem:

[Title $ = "rigtige karakter"] {}.

Fordele - maksimal fleksibilitet. Du kan vælge alle eksisterende sideelementer uden at rode med klasserne.

Ulemper - bruges relativt sjældent, kun i særlige tilfælde. Mange webdesignere foretrækker at metoden, da det punkt klasse er lettere end at arrangere mange kantede parenteser og tegn "lige". Hertil kommer, at disse vælgere ikke i Internet Explorer version 7 og nedenfor. Men der er nu brug for den gamle Internet Explorer?

pseudo-class selektorer

Betegner en pseudo-status element. For eksempel ,: hover - hvad der sker med den del af siden, når du svæver ,: besøgte - den besøgte linket. Det omfatter også elementer som: første barn og: sidste barn.

Denne type af vælgeren bruges aktivt i moderne layout, fordi takket være det kan du lave en side "live" uden brug af JavaScript. For eksempel, du vil være sikker på, at når du holder markøren over knappen med klassen af btn dens farve ændres. For at gøre dette, bruger vi følgende struktur:

.btn: hover {

background-color: red;

}

Skønhed kan specificeres i de grundlæggende egenskaber for knappen, overgangen ejendom, for eksempel 0.5s - i dette tilfælde, vil knappen ikke rødme øjeblikkeligt, og inden for et halvt sekund.

Dyder - er meget udbredt til "vækkelse" sider. Let at bruge.

Ulemper - de er ikke. Dette er en virkelig praktisk værktøj. Dog kan uerfarne webdesignere fare vild i den overflod af pseudo-klasser. Problemet er løst studier og praksis.

pseudoselektorer

"Pseudo" - det er de dele af siden, der ikke er i HTML, men de kan stadig styres. Du forstod ikke? Det er meget nemmere end det ser ud. For eksempel, du ønsker at gøre det første bogstav i strengen stort og rød, mens den anden lille og sort tekst. Selvfølgelig kan det konkluderes, at brevet i et spænd med en bestemt klasse, men det er lang og kedelig. Det er meget lettere at markere hele afsnittet og bruge pseudo :: første bogstaver. Det giver mulighed for at styre udseendet af det første bogstav.

Der er temmelig stort antal pseudo-elementer. Liste over dem i en enkelt artikel er usandsynligt, at lykkes. Du kan finde de relevante oplysninger i din foretrukne søgemaskine.

Fordele - giver fleksibilitet til at tilpasse udseendet på siden.

Ulemper - nye til dem er ofte forveksles. Mange markeringer af denne type arbejde kun i visse browsere.

For at opsummere

Selector - et kraftfuldt værktøj til dokument flow kontrol. Takket være ham, kan du vælge hver enkelt komponent på siden (der er endda kun delvist). Vær sikker på at lære alle de muligheder, eller selv skrive dem ned. Dette er især vigtigt, hvis du opretter komplekse sider med et moderne design og masser af interaktive elementer.