Окончателното ръководство за псевдокласовете на CSS
Независимо дали сте начинаещ или опитен CSS разработчик, вероятно сте чували за него псевдо-класовете. Най-известната псевдоклас е вероятно : навъртам, което ни позволява да стилизираме елемент, когато той е в състоянието на навиване, когато указателно устройство, като например мишка, е насочено към него.
Следвайки концепцията на предишните ни постове: auto и CSS Floats, погледнем по-задълбочено псевдокласите в този пост. Ще видим какви са псевдокласовете, как работят, как можем да ги категоризираме, и как те се различават от псевдоелементите.
Какво са псевдокласи?
Псевдокласът е ключова дума, която можем да добавим към CSS селекторите, за да определи специална държава на принадлежащия HTML елемент. Можем да добавим псевдо-клас към CSS селектора, като използваме Синтаксис на дебелото черво : като този: a: hover …
Класът CSS е атрибут, който можем да добавим към елементите на HTML, за които искаме да приложим същите правила за стил, като елементите на горното меню или заглавията на страничните ленти. С други думи, можем да използваме CSS класове групирате или класифицирате HTML елементи които са сходни по един или друг начин.
Псевдокласовете са сходни с тях в смисъл, че те също са използвани за добавяне на правила за стилове към елементите, които имат една и съща характеристика.
Но докато истинските класове са дефинирани от потребителя и могат да бъдат забелязани в изходния код, например Най- работа на редовни CSS класове е да класифициране или групови елементи. Разработчиците знаят как да бъдат групирани техните елементи: те могат да формират класове като "елементи от менюто", "бутони", "миниатюри" и т.н. Тези класификации се основават на характеристиките на елементите, които са дадени от самите разработчици. Например, ако разработчик реши да използва a HTML елементите обаче имат техните общи характеристики въз основа на тяхното състояние, позиция, характер и взаимодействие с страницата и потребителя. Това са характеристиките, които са не обикновено маркирани в HTML кода, но можем насочете ги към псевдокласовете в CSS, например: Това са характеристиките, които обикновено са насочени към псевдокласовете. За да разберем разликата между класовете и псевдокласовете по-добре, нека предположим, че използваме класа Ние можем да оформим стила на тези последни детски елементи със следния CSS: Но какво се случва, когато последният елемент се промени? Е, ще трябва да преместим Тази караница класовете за обновяване могат да бъдат оставени на потребителския агент, поне за онези характеристики, които са общи за елементите (и като последен елемент е толкова често, колкото може да се получи). като предварително определена Има много видове псевдо-класове, като всички те ни предоставят начини за насочване на елементи въз основа на техните характеристики, които иначе са недостъпни или по-трудни за достъп. Ето списък на стандартните псевдокласове в MDN. Динамичните псевдо-класове се добавят и премахват от HTML елементи динамично, въз основа на състоянието, в което те преминават в отговор на взаимодействията на потребителя. Някои от примерите за динамични псевдокласове са Държавните псевдокласове се добавят към елементите, когато са такива в определено статично състояние. Някои от най-известните му примери са: Най-популярната държавна псевдоклас трябва да бъде Структурните псевдокласове класифицират елементите на базата тяхната позиция в структурата на документа. Неговите най-често срещани примери са Има и различни псевдокласове, които са трудни за класифициране, като: Едно от най-трудните неща за псевдокласовете е да разберем разликата между И двете са структурни псевдокласове и марки специфичен елемент в родителския елемент (контейнер), но по различен начин. предполагам п тогава е 2 Нека погледнем един пример. Нека видим как този кратък CSS стилизира HTML в два различни случая. В случай 1, вторият елемент вътре в a Но ако родителският елемент прави имат втори параграф, В нашия пример Параграф 1, дете 1 Параграф 2, Дете 3 Във втория случай преместваме неупоредния списък на трето място, а вторият параграф ще се появи преди него. Това означава, че и двете Параграф 1, дете 1 Параграф 2, Дете 2 Ако искате да прочетете повече за разликите между Когато говорим за псевдокласи, също е важно да се разбере как те се различават от псевдо-елементи, за да не ги смесваме. Но докато използваме псевдокласи, за да изберем HTML елементи, които съществуват в дървото на документа просто не са маркирани отделно, псевдо-елементите ни позволяват да насочваме елементи към това обикновено не съществуват в DOM, или изобщо (напр Има и a разлика в синтаксиса. Псевдо-елементите обикновено се идентифицират с двойни колони Това може да доведе до объркване, тъй като в CSS2 псевдоелементите също са маркирани с едно двоеточие - браузърите все още приемат един синтаксис с двоеточие за псевдо-елементи. Има и различия между псевдо-класовете и псевдо-елементите в начина, по който можем да ги насочим с CSS. Псевдо-елементите могат да се появяват само след последователността на селекторите, докато псевдокласите могат да бъдат поставени навсякъде в CSS селекторната последователност. Например, можете да насочите последния елемент от списъка като елемент от списък ИЛИ Първата последователност на селектора избира последното дете вътре в Нека се опитаме да направим нещо подобно с псевдо-елементи. Горният CSS код е валиден и ще се появи текстът "червено" след на Този код, от друга страна, няма да работи, както ние не може да промени позицията на псевдо-елемент вътре в селекторната последователност. Също така, само един псевдоелемент може да се появи до селектора, докато псевдокласовете могат да се комбинират един с друг ако комбинацията има смисъл. Например, за да насочите първите дъщерни елементи, които също са само за четене, можем да създадем комбинация от псевдокласовете Код на селектора с a Важно е да знаете това това са не CSS псевдокласи които са насочени към jQuery. Те се наричат jQuery селекторни разширения. Разширенията за избор на jQuery ви позволяват насочете HTML елементи с по-прости ключови думи. Повечето от тях са комбинации от множество нормални CSS селектори, които са представени с една ключова дума.Цел на псевдокласите
.последно да идентифицира последните елементи в различни родителски контейнери.
li.last текст-трансформация: главни; option.last font-style: italic;
.последно клас от предишния последен елемент до текущия.:последно дете псевдо-клас наистина е много полезно. По този начин ние не трябва да посочвате последния елемент в HTML-кода, но все още можем да ги оформим със следния CSS: li: последно дете text-transform: главни букви; опция: последно дете font-style: italic;
Основни видове псевдокласи
1. Динамични псевдокласи
: навъртам, : фокус, : линк, и : посетен, всички от тях могат да бъдат добавени към прикрепен маркер. a: посетен цвят: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Държавни псевдокласи
: проверява които могат да се прилагат за отметки ():цял екран за да насочите всеки елемент, който в момента се показва в режим на цял екран:хора с увреждания за HTML елементи, които могат да бъдат в деактивиран режим, като например , , и . : проверява, който показва дали е поставена отметка или не. .отметка: чек + етикет font-style: italic; input: disabled background-color: #EEEEEE;
3. Структурни псевдокласи
:първо дете, :последно дете, и : Тото-дете (п) - всички могат да бъдат използвани за насочване на конкретен елемент на детето в контейнер на базата на неговата позиция - и : корен който е насочен към родителския елемент от най-високо ниво в DOM. 4. Разни псевдокласи
: Не (х) който избира елементи, които не съвпадат със селектора x: Ланг (език-код) който избира елементи, чието съдържание е на определен език: Реж (насоченост) който избира елементи със съдържание на дадена насоченост (от ляво на дясно или отдясно наляво). p: lang (ko) фонов цвят: # FFFF00; : root цвят на фона: # FAEBD7;
тото-дете срещу от типа Псевдо-класовете
: Тото-дете и : Тото-на-тип псевдо-класовете.: Тото-на-дете (п) е насочен към елемент, който е второ дете на своя родителски елемент, и : Тото-на-тип (п) цели вторият сред същия тип елемент (като параграфи) вътре в родителския елемент. / * абзац, който също е второто дете в неговия родителски елемент * / p: nth-child (2) color: # 1E90FF; // lightblue / * вторият параграф вътре в родителския елемент * / p: nth-of-type (2) font-weight: bold;
Случай 1
тото-дете (2) правило не се прилага към него. Въпреки че е второ дете, това е така не параграф. тото-на-тип (2) Правилото ще се прилага, тъй като това правило само търси други елементи видове от елементите (като нерегламентирани списъци) в родителския елемент.тото-на-тип (2) Правилото ще оформя втория параграф, който е дете 3.
Непореден списък 1, дете 2
Случай 2
: Тото-дете (2) и : Тото-на-тип (2) ще се прилагат правилата, като вторият параграф е също второто дете на своя родител
Непореден списък 1, дете 3
: Тото-на-дете и : Тото-на-тип псевдокласовете, CSS Tricks има голям пост в него. Ако използвате SASS, Family.scss може да ви помогне да създадете сложни тото-дете"елементите на. \ t.Псевдокласове срещу псевдоелементи
Псевдо-елементи, като ::преди и ::след (вижте този урок за това как да ги използвате) също добавени от потребителски агенти, и те могат да бъдат насочени и оформени с CSS също като псевдокласовете. ::преди и ::след) или само като част от съществуващи елементи (напр ::първа буква или :: контейнер). ::, псевдокласовете се идентифицират с едно колона :.1. Мястото им в последователността на CSS селектора
ul>: last-child.red color: # B0171F;
ul> .red: последно дете color: # B0171F;
.червен), а вторият избира последното дете сред елементите, които притежават .червен клас вътре ul> .red :: after display: block; съдържание: „червено“; цвят: # B0171F;
елементи с класа .червен. ul> :: after.red display: block; съдържание: „червено“; цвят: # B0171F;
2. Брой на случаите в последователност на селектора
:първо дете и :Само за четене по следния начин: : първо дете: само за четене цвят: #EEEEEE;
jQuery селекторни разширения
: синтаксисът не винаги представлява правилна CSS псевдоклас. Ако някога сте използвали jQuery, може би сте използвали много от неговите селектори : например синтаксис $ ( ': Квадратчето "), $ ( ': Вход ") и $ ( ": Избран"). / * Промяна на шрифта на всички HTML елементи, свързани с въвеждането, като бутон, избор и въвеждане * / $ (": input") .css ("font-family", "courier new")
