CSS selectors. soarten selectors

, elk fan dêr't jo wolle ynstelle in spesifike kleur. Hoe moat it? Standert CSS selectors binne net geskikt foar tags, se jouwe de parameter foar alle blokken tagelyk. De oplossing is simpel. Assign klasse leden. Bygelyks, de earste krige div class = 'read', twadde - class = 'blauwe', tredde - class = 'grien'. No sy kin selektearre wurde fia CSS tabellen.

De syntaksis is as folget: jout in punt ( "."), Folge troch it skriuwen fan de namme fan 'e klasse. Om beheare it earste ienheid, brûk de bou .red. Twadde - .blue ensafuorthinne.

Wichtich! It is oan te rieden om te brûken sinfolle wearden fan 'e klasse skaaimerk. It wurdt beskôge minne foarm te brûken transliteraasje (eg, krasiviy-blok) of willekeurige kombinaasjes fan letters / nûmers (ojfh834871). Yn dizze koade, jo dogge dat betize reitsje, net te ferjitten de swierrichheden dy't sil face dyjingen dy't wurdt dwaande mei it projekt nei jimme. De bêste opsje - te brûken eltse metodyk, lykas BEM.

Foardielen - relatyf hege begeanber wiene.

Neidielen - de meardere eleminten kinne ien en deselde klasse, wat betsjut dat se sille wurde bewurke tagelyk. It probleem wurdt oplost mei help fan de metoade likegoed as erfskip preprocessors. Wês wis dat te krijen dyn hannen minder, Sass of guon oare preprocessor, se tige ferienfâldigje it wurk.

ID selector

Oer dizze ferzje miening coders en programmeurs binne dûbelsinnich. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Guon CSS Tutorials net riede it brûken fan ID, omdat yn miny-ôfbyldings applikaasje se kin foar problemen soargje by fererving. Lykwols in protte saakkundigen binne aktyf regelje se hiele opmaak. Jo beslute. # »), затем имя блока. De syntaksis is as folget: it pûn teken ( "#"), dan is de namme fan it blok. #red. Bygelyks, #red.

отличается от класса по нескольким параметрам. ID is oars út 'e klasse op ferskate wizen. ID. Earst, de side kin net wurde twa identike ID. Se binne tawiisd in unike namme. Twads, sa'n selektor hat in hegere prioriteit. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Dat betsjut dat as jo oantsjutte in ienheid klasse reade en spesifisearje yn CSS tafels read eftergrûnkleur, en dan takenne oan dat deselde id blau en spesifisearje de kleur blau, de ienheid sil keare blau.

Foardielen - kinne jo beskiede, de spesifike elemint, negearjen stilen fan tags en klassen.

ID и class. Neidielen - maklik om te kwyt yn in grut oantal ID en klasse.

Wichtich! ID вам, в общем-то, не нужны. As jo brûke BEM metodyk (of syn analogen), ID ta jimme, yn it algemien, net nedich. Dizze technyk giet it om it brûken fan de yndieling unike klassen dy't folle handiger.

universele selector

{}. Syntaksis: Starlets teken ( "*") en beugels, dat wol sizze, {*} ...

Brûkt om assign bepaalde attributen ien kear alle eleminten fan de side. As dit kin brûkber wêze? box-sizing: border-box. Bygelyks, as jo wolle set de side eigendom box-Sizing: border-box. div *{}. Kin net allinne brûkt wurde om beheare alle ûnderdielen fan it dokumint, mar ek om al de bern fan 'e opjûne blok, bygelyks, div * {}.

Foardielen - kinne jo beskiede, in grut tal items op in tiid.

Cons - net genôch fleksibel opsje. Boppedat, it brûken fan dizze selektor, yn guon gefallen remmen de side wurk.

by attributen

Meitsje it mooglik om it elemint mei in spesifike attribuut. Bygelyks, Jo hawwe in oantal ynfier tags mei in oar skaaimerk type. Ien fan har - tekst, it twadde - wachtwurd, de tredde - nûmer. Fansels kinne jo ynstelle eltse klasse of ID, mar it is net altyd handich. CSS selectors fan attributes meitsje it mooglik om te spesifisearje wearden foar bepaalde tags mei maksimale presisy. Bygelyks, lykas dit:

input [type = 'tekst'] {}

Dizze Selektearder sil selektearje alle attributen mei it type fan 'e ynput tekst.

It ynstrumint is hiel fleksibel en kin brûkt wurde mei ien fan 'e tags, it is mei it wêze attributen. Mar dat is net alles! It CSS spesifikaasje hat de mooglikheid om de eleminten mei noch mear gemak!

Yntinke dat jo side hat ynfier mei it predikaat pleatshâlder = "Fier in namme" en input pleatshâlder = "Fier wachtwurd". Se kinne ek selektearre wurde fia it selektor! Om dit te dwaan, brûk de neikommende struktuer:

input [pleatshâlder = "Fier de namme"] {} of input [pleatshâlder = "Fier it wachtwurd yn"]

Faaks mear fleksibele wurk mei attributen. Litte we sizze jo in oantal tags mei ferlykbere attributen titel (bygelyks, "Caspian" en "Kaspyske"). Om selektearjen beide, brûk de folgjende seleksjes:

[Title * = "Kassimow"]

CSS sil kieze alle items yn 'e titel fan dy't der binne symboalen fan "Kaspyske", dat wol sizze. E., En "Caspian" en "Caspian".

Jo kinne ek kieze tags dy't begjinne mei in bepaalde karakter attributes:

[Title ^ = "karakter jo wolle"] {}

of terminate se:

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

Foardielen - maksimum begeanber wiene. Jo kinne selektearje eltse besteande side eleminten sûnder messing mei de klassen.

Neidielen - brûkt relatyf komselden, allinnich yn spesifike gefallen. In soad web ontwerpers leaver oan metodyk, sûnt it punt klasse is makliker dan te regeljen tal fan fjouwerkante heakjes en tekens "gelikense". Boppedat, dizze selectors wurkje net yn Internet Explorer ferzjes 7 en derûnder. Lykwols, dy't no hast de âlde Internet Explorer?

pseudo-klasse selectors

Denotes in pseudo-status elemint. Bygelyks ,: Hover - wat der bart mei it diel fan de side as jo de mûs ,: besocht - de besochte keppeling. Ek befettet eleminten lykas: earst-bern en: last-bern.

Dit type selektor wurdt aktyf brûkt yn moderne yndieling, omdat tank oan it kinne jo meitsje in side "live" sûnder it brûken fan JavaScript. Bygelyks, Jo wolle der wis fan dat as jo mei de mûs oer de knop mei de klasse fan BTN syn kleur feroare. Om do dit, wy brûke de neikommende struktuer:

.btn: Hover {

background-color: read;

}

Beauty spesifisearre wurde yn de basiseigenskippen fan de knop, de oergong eigendom, bygelyks, 0.5s - yn dit gefal, de knop sil net skamje direct, en binnen in heale sekonde.

Deugden - wurde soad brûkt foar it "oplibjen" fan siden. Maklik om te brûken.

Neidielen - se binne net. Dit is in echt handige ark. Lykwols, sûnder ûnderfining web ûntwerpers kinne krije ferlern yn 'e oerfloed fan de pseudo-klassen. It probleem wurdt oplost stúdzje en praktyk.

pseudo-selectors

"Pseudo" - dat binne de dielen fan de side dy't net yn HTML, mar se dochs kinne beheard wurde. Jo net begripe? It is folle makliker as dat it liket. Bygelyks, jo wolle meitsje de earste letter yn 'e string grut en read, it ferlitten fan de oare lytse en swarte tekst. Fansels, kin konkludearre dat brief yn in span mei in bepaalde klasse, mar it is lang en saai. It is folle makliker te selektearjen de hiele alinea en brûke pseudo :: earst-brief. It jout de mooglikheid om ynfloed op it uterlik fan 'e earste brief.

Der binne nochal in grut oantal pseudo-eleminten. In list sjen se yn in inkeld artikel is net folle kâns fan slagjen. Jo fine de relevante ynformaasje yn jo favorite sykmasine.

Foardielen - jouwe de fleksibiliteit te passen de útstrieling fan de side.

Neidielen - nij foar harren binne faak ferwiksele. In protte seleksjes fan dit soarte fan wurk allinnich yn bepaalde browsers.

om gearfetsje

Selector - in krêftige helpmiddel foar dokumint flow kontrôle. Mei tank oan him, kinne jo selektearje alle inkele komponint fan de side (der binne noch mar foar in part). Wês wis to learen al de beskikbere opsjes, of sels skriuwe se del. Dat is benammen wichtich as jo meitsje komplekse siden mei in modern design en in soad ynteraktive eleminten.