Дефинитиве Гуиде то ЦСС Псеудо-Цлассес
Било да сте почетник или искусни ЦСС програмер, вероватно сте чули псеудо-класе. Најпознатија псеудо-класа је вероватно :лебдети, што нам омогућава да стилизујемо елемент када је у стању лебдјења, тј. када је показивачки уређај, као што је миш, уперен у њега.
Пратећи концепт наших претходних постова на маргини: ауто и ЦСС Флоатс, детаљније ћемо погледати псеудо-класе у овом посту. Видећемо какве су псеудо-класе, како они раде, како их можемо категоризирати, и како се разликују од псеудо-елемената.
Шта су псеудо-класе?
Псеудо-класа је кључна реч коју можемо додати ЦСС селекторима да би дефинисати посебну државу припадног ХТМЛ елемента. Можемо додати псеудо-класу ЦСС селектору користећи цолон синтак : овако: а: ховер …
ЦСС класа је атрибут који можемо додати у ХТМЛ елементе за које желимо применити иста правила за стил, као што су ставке горњег менија или наслови видгета на бочној траци. Другим речима, можемо користити ЦСС класе груписање или класификовање ХТМЛ елемената сличне или сличне.
Псеудо-класе су им сличне у смислу да су и оне користи се за додавање правила стила елементима који деле исту карактеристику.
Али док су праве класе кориснички дефинисано и може се уочити у изворном коду, на пример Тхе посао редовних ЦСС класа ис то класификовати или груписати елементе. Развојни инжењери знају како да се групишу њихови елементи: они могу да формирају класе као што су "ставке менија", "дугмад", "сличице", итд. Ове класификације се заснивају на карактеристикама елемената који су које дају сами програмери. На пример, ако се програмер одлучи да користи а ХТМЛ елементи ипак имају њихове заједничке карактеристике на основу њиховог стања, положаја, природе и интеракције са страницом и корисником. То су карактеристике које су не обично означени у ХТМЛ коду, али можемо циљајте их псеудо-класама у ЦСС-у, на пример: То су карактеристике које су углавном циљане псеудо класама. Да бисмо боље разумели разлику између класа и псеудо-класа, претпоставимо да користимо класу Ове последње подређене елементе можемо да стилизујемо са следећим ЦСС-ом: Али шта се дешава када се промени последњи елемент? Па, мораћемо да померимо Ова гњаважа класе ажурирања се могу препустити корисничком агенту, барем за оне карактеристике које су уобичајене међу елементима (и што је последњи елемент је уобичајен као што се може добити). Имајући предефинисани Постоје многе врсте псеудо-класа, које све нам пружају начине да циљамо елементе на основу њихових карактеристика које су иначе недоступне или теже приступити. Ево листе стандардних псеудо класа у МДН-у. Динамичке псеудо-класе додају се и уклањају из ХТМЛ елемената динамички, на основу стања у које прелазе као одговор на интеракције корисника. Неки од примјера динамичких псеудо-класа су Државне псеудо-класе додају се елементима када су у питању у одређеном статичном стању. Неки од његових најпознатијих примјера су: Најпознатија државна псеудо-класа мора бити Структурне псеудо-класе класификују елементе на основу њиховој позицији у структури документа. Његови најчешћи примери су Постоје и разне псеудо-класе које је тешко класификовати, као што су: Једна од најтежих ствари о псеудо-класама је вероватно разумевање разлике између Оба су структурна псеудо-класе и означавају специфичан елемент унутар елемента родитеља (контејнер), али на другачији начин. Претпостављам н је 2, онда Погледајмо један пример. Погледајмо како овај кратки ЦСС стила ХТМЛ у два различита случаја. У случају 1, други елемент унутар а Али ако је родитељ елемент не имати други параграф У нашем примеру Став 1, Дијете 1 Став 2, Дете 3 У другом случају померамо неуређену листу на треће место, а други параграф ће доћи пре њега. То значи да обоје Став 1, Дијете 1 Став 2, Дијете 2 Ако желите да прочитате више о разликама између Када говоримо о псеудо-класама, такође је важно разумети како се разликују од псеудо-елемената, да их не помешамо. Али док користимо псеудо-класе да изаберемо ХТМЛ елементе постоје у стаблу документа само што нису посебно означене, псеудо-елементи нам дозвољавају да циљамо елементе иначе не постоје у ДОМ-у, или уопште (нпр Ту је и а разлика у синтакси. Псеудо-елементи се генерално идентификују са двоструким колонама Ово може довести до конфузије као у ЦСС2, псеудо-елементи су обележени само једним двоточком - претраживачи још увек прихватају једну синтаксу двоточке за псеудо-елементе. Такође постоје разлике између псеудо-класа и псеудо-елемената у начин на који их можемо циљати помоћу ЦСС-а. Псеудо-елементи се могу појавити само после редослед селектора, док псеудо-класе могу бити постављене било где у ЦСС селекторској секвенци. На пример, можете циљати последњу ставку листе елемента листе ОР Прва секвенца селектора бира последње дете унутар Покушајмо да урадимо нешто слично са псеудо-елементима. Горњи ЦСС код је важећи, и појављује се текст "црвено" после тхе Овај код, с друге стране, неће радити, као ми не може променити положај псеудо-елемента унутар секвенце селектора. Такође, само један псеудо-елемент може да се појави поред селектора, док псеудо-класе могу се комбиновати ако комбинација има смисла. На пример, за циљање првих подређених елемената који су такође само за читање, можемо креирати комбинацију псеудо-класа Код селектора са а Важно је то знати су не ЦСС псеудо-класе које су мета јКуери-а. Они се називају јКуери екстензије селектора. ЈКуери екстензије селектора вам дозвољавају циљајте ХТМЛ елементе са једноставнијим кључним речима. Већина њих су комбинације више нормалних ЦСС селектора, који су представљени једном кључном ријечи.Сврха Псеудо-Класе
.последњи да идентификује последње елементе у различитим родитељским контејнерима.
ли.ласт тект-трансформ: велика слова; оптион.ласт фонт-стиле: италиц;
.последњи класа од претходног последњег елемента до тренутног.: последње дете псеудо-класа је заиста корисно. Овуда, ми не морате да означавате последњи елемент у ХТМЛ-коду, али још увек можемо да их стилизујемо са следећим ЦСС-ом: ли: ласт-цхилд тект-трансформ: велика слова; оптион: ласт-цхилд фонт-стиле: италиц;
Главне врсте псеудокласа
1. Динамичке псеудо-класе
:лебдети, : фоцус, :линк, и :посетио, све се може додати у анцхор таг. а: виситед цолор: # 8Д20АЕ; .буттон: ховер, .буттон: фоцус фонт-веигхт: болд;
2. Псеудо-класе на државном нивоу
: цхецкед које се могу применити за поља за потврду ():цео екран да бисте циљали било који елемент који се тренутно приказује у режиму целог екрана: дисаблед за ХТМЛ елементе који могу бити у онемогућеном режиму, као што је , , и . : цхецкед, која означава да ли је чекиран или није. .цхецкбок: цхецкед + лабел фонт-стиле: италиц; инпут: дисаблед бацкгроунд-цолор: #ЕЕЕЕЕЕ;
3. Структурне псеудо-класе
:прво дете, : последње дете, и : нтх-цхилд (н) \ т - све се може користити за циљање специфичног дечјег елемента унутар контејнера на основу његове позиције - и :корен која циља надређени елемент највишег нивоа у ДОМ-у. 4. Разне Псеудо-Класе
: не (к) који бира елементе који не одговарају селектору к: ланг (језик-код) који бира елементе чији је садржај на одређеном језику: дир (усмјереност) који бира елементе са садржајем дате смерности (лево на десно или десно на лево). п: ланг (ко) бацкгроунд-цолор: # ФФФФ00; : роот бацкгроунд-цолор: # ФАЕБД7;
нтх-цхилд вс нтх типа Псеудо-Цлассес
: нтх-цхилд и : нтх-оф-типе псеудо-класе.: нтх-оф-цхилд (н) циља елемент који је друго дијете родитељског елемента, и : нтх-оф-типе (н) циљеве други међу исте врсте елемента (као што су параграфи) унутар елемента родитеља. / * параграф који је уједно и друго дете унутар његовог родитељског елемента * / п: нтх-цхилд (2) цолор: # 1Е90ФФ; // лигхтблуе / * други пасус унутар родитељског елемента * / п: нтх-оф-типе (2) фонт-веигхт: болд;
Случај 1
нтх-цхилд (2) \ т правило се неће применити на њега. Иако је друго дете, јесте не Параграф. нтх-оф-типе (2) Правило ће се примењивати, јер ово правило само тражи елементима, и не мари за друге врсте елемената (као што су неуређене листе) унутар основног елемента.нтх-оф-типе (2) Правило ће обликовати други параграф који је Цхилд 3.
Унордеред Лист 1, Цхилд 2
Случај 2
: нтх-цхилд (2) \ т анд тхе : нтх-оф-типе \ т правила ће се примјењивати, јер је други параграф и друго дијете свог родитеља
Унордеред Лист 1, Цхилд 3
: н-ти-дијете и : нтх-оф-типе псеудо-класе, ЦСС Трицкс има одличан пост на њему. Ако користите САСС, Фамили.сцсс вам може помоћи да направите компликовано нтх-цхилд'елементи елемената.Псеудо-Класе вс Псеудо-Елементи
Псеудо-елементи, као такав ::пре него што и ::после (погледајте овај водич о томе како их користити) које су додали кориснички агенти, и могу бити циљани и обликовани помоћу ЦСС-а као и псеудо-класе. ::пре него што и ::после) или само као одређене делове постојећих елемената (нпр ::прво слово или :: плацехолдер). ::, док су псеудо-класе идентификоване са једним дебелим цревом :.1. Њихово место у ЦСС селектору
ул>: ласт-цхилд.ред цолор: # Б0171Ф;
ул> .ред: ласт-цхилд цолор: # Б0171Ф;
.црвено) а други бира задње дете међу елементима који поседују .црвено цласс инсиде ул> .ред :: афтер дисплаи: блоцк; цонтент: 'ред'; цолор: # Б0171Ф;
ставке са класом .црвено. ул> :: афтер.ред дисплаи: блоцк; цонтент: 'ред'; цолор: # Б0171Ф;
2. Број појављивања у секвенци селектора
:прво дете и :само за читање на следећи начин: : фирст-цхилд: реад-онли цолор: #ЕЕЕЕЕЕ;
јКуери Селецтор Ектенсионс
: синтакса не представља увек прави ЦСС псеудо-класу. Ако сте икада користили јКуери, можда сте користили многе његове селекторе : синтакса, на пример $ (': цхецкбок'), $ (': инпут') и $ (': одабрано'). / * Промените фонт свих ХТМЛ елемената везаних за унос, као што су дугме, селекција и унос * / $ (": инпут") .цсс ("фонт-фамили", "цоуриер нев")
