Псевдо-в CSS, уроци, webreference

Видяхме, са основно три вида селектори CSS:

  • обикновен. където р в CSS цел за HTML-елементи

    ;

  • класове. където .intro в CSS има за цел да елементи с клас атрибут = "интро";
  • Документи за самоличност. където #logo в CSS е насочена към елемента с най-атрибут ID = "лого".

Всички тези превключватели може да бъде свързан псевдо-класове. В псевдо-класа:

  • определя специално състояние на елемента;
  • е ключовата дума, която започва с двоеточие.

Псевдо-класа не може да съществува само по себе си. Тя трябва да бъде прикрепен към селектора. Псевдо-класа ще открие само определено състояние на селектора.

Синтаксисът е както следва:

Разликата между избор и не псевдо. да покаже, че те са свързани помежду си.

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

Втората линия е ориентирана към едни и същи елементи, както и HTML. но само. когато има нещо конкретно (в този случай, ръководство).

Това има за цел да псевдо-връзки, които вече са посетили. По подразбиране връзки се показват в синьо и лилаво, която посещавате. Резултатите ни да работят по един и същ.

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

Това се случва, когато един псевдо HTML елемент са получили фокус. Това е особено полезно в форма области.

Обикновено се очертаят: няма премахва сиянието около терена.

: Първо дете и: последната дете

Тези псевдо-класовете са свързани с йерархия в HTML. Те се стремят HTML елементи, в зависимост от поръчката. в който те се появяват в кода.

Както можете да видите, нито една от клас стил не се отнася за първия и последния ден

  • . Тяхната позиция в йерархията се определя чрез използване на правилата на CSS.

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

    : N-а-дете

    Това е псевдо-глобална версия: първо дете и: последната дете. С: тото-детето, може да се изчисли специфичен дете елемент на целта.

    Например, ако искате да се насочите на второ дете елемент, след това да използвате: тото-детето (2).

    странно и дори

    В допълнение към използването на номера. тото дете идва с две ключови думи:

    • : N-а-дете (странно), ще се насочите всеки нечетен елемент;
    • : N-а-дете (дори) са насочени към всеки четен елемент.

    Мощен аспект на: тото-детето е, че той може да се насочите на елементите, въз основа на изчисления с използване на ключовата дума н.

    Стойността на п увеличава от 0 до броя представлявана от дъщерните елементи.

    Какво става, ако искате да се насочите всеки трети елемент?

    В нашия случай н започва от нула и завършва шест.

    Компютри започват броенето от нула. И тъй като в нашия списък от седем елемента, ние разчитаме на шест, защото 0-1-2-3-4-5-6 са седем точки.

    Можете да прочетете: тото-детето (3n), като "се прицели във всеки елемент, позицията на която е разделена на три". В нашия случай, това е третият и шестият елемент в списъка:

    • 3 умножена от 0 е нула;
    • 3 умножен по 1 - третата точка;
    • 3, умножена по две - шеста.

    Какво става, ако искате да се насочите първата точка, а всеки трети елемент, след него?

    3n + 1 се състои от две части:

    Ето как са извършени изчисления:

    • 3 се умножава по 1 плюс 0 е 1;
    • 3 се умножава по 1 плюс 1 е равно на 4;
    • 3, умножена по две плюс 1 равнява 7.

    Counter п е много гъвкава. Ако изчисленията, е трудно да се направи, просто се тества, за да получите правилната извадка.

    други псевдо-класовете

    Има десетки налични псевдо-класовете. някои от тях са предназначени за много специфични условия. Ние описахме най-използваните от тях.