CSS selektori. veidi selektori

, no kuriem katrs vēlaties iestatīt konkrētu krāsu. Kā to izdarīt? Standarta CSS selektori nav piemērotas tagus, viņi norāda parametrus visiem blokiem vienlaicīgi. Risinājums ir vienkāršs. Piešķirt klases biedri. Piemēram, pirmais saņēma div class = "sarkanais", otrā - class = "zilā", trešais - class = "zaļo". Tagad viņi var izvēlēties, izmantojot CSS tabulām.

Sintakse ir šāda: Norāda punktu ( "."), Kam seko rakstot nosaukumu klasē. Lai pārvaldītu pirmo vienību, izmantojiet būvniecību .red. Otrais - .blue un tā tālāk.

Svarīgi! Ieteicams lietot jēgpilnu vērtības klases atribūtu. Tas tiek uzskatīts par sliktu formu izmantot transliterāciju (piemēram, krasiviy-blok) vai izlases kombinācijas burti / cipari (ojfh834871). Šajā kodu, jums ir pienākums saņemt sajaukt, nemaz nerunājot par grūtībām, kas saskaras ar tiem, kuri būs iesaistīti projektā pēc jums. Labākais variants - izmantot jebkuru metodi, piemēram, BEM.

Priekšrocības - salīdzinoši augsta elastība.

Trūkumi - arī vairāki elementi var būt viena un tā pati klase, kas nozīmē, ka tie tiks rediģēts vienlaicīgi. Problēma ir atrisināta, izmantojot metodiku, kā arī mantojumu preprocessors. Pārliecinieties, lai saņemtu savu roku mazāk Sass vai kādu citu apstrādātāju, tie ievērojami vienkāršot darbu.

ID selector

Par šo versiju viedoklis kodētāji un programmētāji ir neskaidrs. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Daži CSS konsultācijas neiesakām izmantot ID, jo neprecīzi pieteikumā tie var radīt problēmas ar mantojumu. Tomēr daudzi eksperti ir aktīvi sakārtot tos visā izkārtojumu. Jums izlemt. # »), затем имя блока. Sintakse ir šāda: sterliņu zīmi ( "#"), tad nosaukums bloku. #red. Piemēram, #red.

отличается от класса по нескольким параметрам. ID atšķiras no klases vairākos veidos. ID. Pirmkārt, lapu nevar būt divas identiskas ID. Tie tiek piešķirts unikāls nosaukums. Otrkārt, šāda selektors ir augstāka prioritāte. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Tas nozīmē, ka, ja jūs norādāt vienību klasi sarkano un norādiet CSS tabulām sarkanā fona krāsu, un pēc tam piešķiriet tam to pašu ID zilā un norādīt krāsu zils, vienība kļūs zila.

Priekšrocības - Jūs varat kontrolēt konkrētu elementu, ignorējot stilus tagus un klasēs.

ID и class. Trūkumi - viegli pazust daudzās ID un klasi.

Svarīgi! ID вам, в общем-то, не нужны. Ja jūs izmantojat BEM metodiku (vai tās analogi), ID jums, kopumā nav vajadzīgs. Šī metode ietver izmantošanu izkārtojuma unikālu klašu ka daudz ērtāk.

universālais selektors

{}. Sintakse: Starlets zīme ( "*"), un bikšturi, ti, {*} ...

Izmanto, lai piešķirtu noteiktas atribūtus Kad visas lapas elementus. Kad tas var noderēt? box-sizing: border-box. Piemēram, ja jūs vēlaties iestatīt lapas īpašuma kaste-izmēriem: border-kasti. div *{}. Var izmantot ne tikai, lai pārvaldītu visus komponentus dokumenta, bet arī, lai kontrolētu visus bērnus norādīto bloka, piemēram, div * {}.

Priekšrocības - Jūs varat kontrolēt lielu skaitu vienību laikā.

Mīnusi - nav pietiekami elastīgs risinājums. Turklāt, izmantojot šo atlasītāju, dažos gadījumos palēnināt lapas darbu.

ar atribūtiem

Padariet to iespējams kontrolēt elementu ar konkrētu atribūtu. Piemēram, jums ir vairākas ieejas tagus ar citu atribūta tipu. Viens no tiem - tekstu, otrais - parole, trešais - skaitlis. Protams, jūs varat iestatīt katru klasi vai ID, bet tas ne vienmēr ir ērti. CSS selektori atribūti ļauj norādīt vērtības atsevišķiem tagus ar maksimālu precizitāti. Tā, piemēram, šādi:

input [type = 'text'] {}

Tas selektors tiks atlasītas visas atribūti ar ievades teksta veidam.

Šis rīks ir diezgan elastīgs un to var izmantot ar kādu no atzīmēm, kurās var būt atribūti. Bet tas vēl nav viss! CSS specifikācijas ir spēja kontrolēt elementus ar vēl lielāku ērtības!

Iedomājieties, ka jūsu lapa ir ieeja ar atribūtu viettura = "Ievadiet vārdu" un ievadi viettura = "Ievadiet paroli". Tās var arī atlasīt, izmantojot selektoru! Lai to izdarītu, izmantojiet šādu struktūru:

input [viettura = "Enter nosaukumu"] {} vai input [viettura = "Enter paroli"]

Varbūt elastīgāks darbs ar atribūtiem. Pieņemsim, ka jums ir vairākas tagus ar līdzīgu atribūtiem nosaukumu (piemēram, "Kaspijas" un "Kaspijas"). Lai izvēlētos gan izmantot šādus atlases:

[Title * = "Kaspiysk"]

CSS izvēlēsies visas preces nosaukumu, kuru tur ir simboli "Caspian", ti. E un "Kaspijas jūras" un "Caspian".

Jūs varat arī izvēlēties tagus, kas sākas ar noteiktu rakstzīmju atribūtus:

[Title ^ = "rakstzīme"] {}

vai izbeigt tās:

[Title $ = "labais tēls"] {}.

Priekšrocības - maksimāla elastība. Jūs varat izvēlēties jebkuru esošās lapas elementus bez messing ar klasēm.

Trūkumi - tiek izmantota samērā reti, tikai īpašos gadījumos. Daudzi web dizaineri izvēlas metodoloģiju, jo punkts klase ir vieglāk nekā sakārtot daudzas kvadrātiekavas un zīmes "vienāds". Turklāt šie pārslēdzējiem nedarbojas Internet Explorer versiju 7 un zemāk. Tomēr, kas tagad ir nepieciešams veco Internet Explorer?

pseido-klases iezīmētājiem

Apzīmē pseido-statusa elementu. Piemēram ,: karāšanās - kas notiek ar daļu lapu, kad jūs lidināties ,: apmeklējis - apmeklēto saiti. Tā ietver arī tādus elementus kā: pirmās bērnu un: Pēdējā bērnu.

Šis selektora veids tiek aktīvi izmantots mūsdienu izkārtojumu, jo, pateicoties tam, jūs varat veikt lapu "dzīvu", neizmantojot JavaScript. Piemēram, jūs vēlaties, lai pārliecinātos, ka tad, kad jūs lidināties virs pogas ar klasei btn tās krāsa mainījusies. Lai to izdarītu, mēs izmantojam šādu struktūru:

.btn: hover {

fona krāsu: sarkana;

}

Skaistums var norādīt pamata īpašības pogas, pārejas īpašumu, piemēram, 0.5s - šajā gadījumā poga nebūs sarkt uzreiz, un ievērojot pussekundi.

Tikumi - plaši izmanto "atdzimšanu" lapas. Viegli izmantot.

Trūkumi - tie nav. Tas ir ļoti parocīgs rīks. Tomēr nepieredzējuši web dizaineri var pazust pārpilnība pseido-klasēs. Problēma ir atrisināta izpēti un praksi.

pseido-selektori

"Pseido" - tie ir lapas daļas, kas nav HTML, bet tie joprojām var pārvaldīt. Tu nesaprati? Tas ir daudz vieglāk, nekā šķiet. Piemēram, jūs vēlaties, lai pirmo burtu virknes liels un sarkans, atstājot otru mazo un melnu tekstu. Protams, var secināt, ka burtu ilgst ar noteiktu klasi, bet tas ir garš un garlaicīgs. Tas ir daudz vieglāk, lai atlasītu visu punktu un izmantot pseido :: pirmās vēstuli. Tas dod iespēju kontrolēt izskatu pirmā burta.

Ir diezgan liels skaits pseido-elementiem. Uzskaitiet tos vienā rakstā, ir maz ticams, lai gūtu panākumus. Jūs varat atrast attiecīgo informāciju par jūsu mīļākie meklētājprogrammu.

Priekšrocības - nodrošina elastību, lai pielāgotu izskatu lapā.

Trūkumi - jauni viņiem bieži sajaukt. Daudzi atlases šāda veida darbu tikai dažās pārlūkprogrammās.

Apkopojot

Selector - spēcīgs instruments dokumentu plūsmas kontroli. Pateicoties tam, jūs varat izvēlēties katru sastāvdaļu lapā (ir pat tikai daļēji). Noteikti, lai uzzinātu visas pieejamās iespējas, vai pat rakstīt tos uz leju. Tas ir īpaši svarīgi, ja jums izveidot sarežģītas lapas ar modernu dizainu un daudz interaktīviem elementiem.