CSS, псевдо, псевдо: навъртам, дете, целеви

Чрез комбиниране на HTML и CSS, можете да контролирате абсолютно всички елементи на уеб страници. С стилове, можете лесно да промените външния вид на всеки блок или линия. Често програмист е необходимо да извършите по-сложна задача - да промените външния вид на елемента себе си не е, като отделна част или дадена държава. В този случай, на помощ на псевдо CSS.

Псевдо-работят на същия принцип, както редовните часове в маркирането, но физически не се представя тук. Те могат да бъдат избрани въз основа на елементи, които не са включени в информацията за документ, който няма да се избере по обичайния за избор. Ето един прост пример: Имате ли червен бутон, и искате да, когато задържите стана синьо. Теоретично това може да се реализира в JavaScript, но защо е толкова трудно? Много по-удобно да се използва за : мишката CSS. С нейна помощ можете да дадете на всяко звено на параметрите, които ще се задействат само когато курсора на мишката.

Списък на CSS псевдо-класовете се актуализира редовно. Може би, докато четете този материал, няколко нови появи. За да започнете, помислете за тези, които се появиха в спецификацията на CSS3.

: N-mo-на-тип

Да предположим, че имате списък, в който искате да използвате различни цвята, т.е., на първа линия е, например, написано с червени букви, а вторият - .. синьо, червено отново трети, четвърти отново в синьо. По-рано, че трябваше да се създадат нови класове. Разпределение на миналото добавя към всеки елемент в списъка на класа, а след това се променя външния си вид в стила. Не беше много удобна и замърсяващи оформление.

Сега всичко, което е по-лесно. Използвайте CSS псевдо-клас: тото-на-тип. Това ще даде възможност да получите желания визуален ефект, без да се променя нищо в маркирането. Принципът е прост: трябва да въведете селектор, а в скоби след името напишете формула или ключова дума, която ще намерите най-необходимите елементи. Например ,: тото-на-тип (дори) всички дори ще елементи, и: тото-на-тип (странно) - нечетните. Има голям брой формули се използват за прецизно контролиране. Конзолите показват възможния брой - в този случай стилове, които се прилагат към елемента, чиито индекс е равен на този номер.

: N-а-дете

Това CSS псевдо-класа на принципа на действие е подобен на предишния, но за разлика от него работи изключително с деца на избрания елемент. Например, ако искате да го използвате, за да настроите външния вид на <> Ли тагове в списъка, ще трябва да използвате ул дизайн: тото-дете, защото <ул> е родителят <Ли>.

За прецизен контрол на формулата може да се използва. Те са доста трудно за начинаещи, но си струва малко по-дълбоко в синтаксиса на това как всичко става по-лесно. Формулите са както следва: една + б, където - е фактор, и б - компенсира. Например, ако в скоби показват, п, псевдо-избира всички подчинените елементи (защото това не е уточнено допълнителни условия под формата на А и Б). Ако зададете N + 2, всички елементи, с изключение на първата (тъй като офсет е равно на две) ще бъде избран. Най-хубавото е, този път да учат в практиката. Експериментирайте с компонентите на детето и различни формули.

: Последно дете

Всичко е просто. CSS деца псевдо-класовете се използват, за да изберете конкретен елемент. С това се избира последния детето на компонента родител. Се използва доста често, например, за да изберете последния ред на таблицата или премахване на отстъп от последния блок, за да се избегне неговото прехвърляне към следващия ред.

: N-та последна дете

По принцип на действие е подобен на вече споменахме тото-детето, но действа в обратна посока, т.е.. Д. При използване на елементи ще се движат нагоре. Това е полезно, ако искате да намерите последните няколко позиции.

Може би си мислите, че тези псевдо-класовете и псевдо-елементи CSS безполезни, тъй като можете да вършите нещата добре от конвенционалните класове. Това не е така. : Тото дете ,: nth- последната дете и техните аналози са много удобни при работа по големи проекти - например, в случаите, когато блока има огромен брой деца. Ръчно организира дълго класове и трудно.

Псевдо-държавен контрол

Какво става, ако имате нужда да промените външния вид на даден елемент в дадена държава? Този случай се предвижда CSS псевдо-щракване, като посочи и други актове. Нека ги разгледаме по-подробно.

: линк

Този псевдо CSS препратки, не всички, а само тези, които все още не са посетили. В него можете да зададете стилове за елементи , за които потребителят все още не е изтекъл.

Един аналог на предишното изпълнение, която контролира само вече посетени връзки. Комбинирането на тези два псевдо-класовете, можете да настроите външния вид на тагове точно така, както трябва. Имайте предвид обаче, че щатите са изчислени за различните браузъри и изписан след лечение история.

Повечето от описаните по-горе псевдо-връзките, необходими за работата. Въпреки това, не всички елементи трябва . Няколко изпълнения могат да бъдат приложени към всяка част на страницата напълно.