Спечелете повече власт над вашите уеб дизайни, като използвате тези усъвършенствани CSS селектори.

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

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

Разбиране на CSS псевдо-класове

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

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

instagram viewer
използвайте ги с други CSS селектори, те осигуряват прецизен контрол върху стила и интерактивността.

Синтаксис и използване на CSS псевдоклас

Синтаксисът за CSS псевдо-клас се състои от двоеточие (:), последвано от името на псевдоклас. Ето основния синтаксис:

selector:pseudo-class {
/* styles */
}

В този синтаксис:

  • селектор се отнася до елемента или елементите, които искате да изберете и към които да приложите стилове. Може да бъде HTML елемент, клас, ID или по-сложен селектор като комбинация. Селекторът не е задължителен, но обикновено ще използвате такъв; без него вашият псевдо-клас ще се насочи към всички елементи, към които може да се приложи.
  • псевдокласа е ключовата дума, която представлява конкретно състояние или състояние, към което искате да се насочите.

CSS категоризира псевдокласовете в няколко групи въз основа на тяхната функционалност и условията, към които са насочени. Ето основните категории заедно с някои примери:

Взаимодействие с потребителя

:задръжте

Избира елемент, когато показалецът на мишката задържи върху него.

:активен

Избира елемент, когато потребител го активира, обикновено чрез щракване.

:посетен

Избира връзки, които потребителят е посетил.

Структурни

:първо дете

Избира първия дъщерен елемент на родител.

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

Избира последния дъщерен елемент на родител.

:n-то дете (n)

Избира елементи въз основа на тяхната позиция в родител, което ви позволява да насочвате към конкретни деца.

Свързани с формуляра

:хора с увреждания

Избира деактивирани елементи на формуляр.

:проверено

Избира маркирани радио бутони или квадратчета за отметка.

Състояние на UI елемент

: невалиден

Избира невалидни елементи на формуляр.

: задължително

Избира задължителните полета на елементите на формуляра.

: по избор

Избира елементи на формуляр, които са незадължителни полета.

Свързани с връзки

: връзка

Избира непосетени връзки.

Езиково базиран

:lang()

Избира елементи въз основа на езика, посочен в техния атрибут „lang“.

Можете да опитате общ пример от прилагане на :hover ефекти към изображения в галерия. Типичните стилове включват уголемяване или избледняване на тези изображения, когато някой задържи курсора на мишката над тях.

Изследване на CSS псевдо-елементи

CSS псевдоелементът е като специална ключова дума, която можете да използвате със селектори, за да стилизирате конкретни части от съдържанието на елемент или да вмъкнете допълнително съдържание. Тези ключови думи ви позволяват да насочвате и стилизирате елементи въз основа на тяхната структура на съдържание.

Псевдоелементи подобрете дизайна и оформлението на вашата уеб страница като ви дава възможност да стилизирате елементи по начини, които традиционно са били възможни само с истински HTML елементи.

Синтаксис и реализация на CSS псевдо-елементи

Псевдоелементите в CSS имат специфичен синтаксис, който включва използването на две двоеточия (::), последвано от името на псевдоелемента. Ето основния синтаксис:

selector::pseudo-element {
/* styles */
}

В този синтаксис:

  • селектор насочва към елемента, към който искате да приложите псевдоелемента. Може да бъде всеки валиден CSS селектор, включително никакъв.
  • псевдоелемент е името на псевдоелемента, към който искате да се насочите. Можете да използвате само един псевдоелемент в селектор, тъй като те наистина нямат смисъл в комбинация.

Ето някои от псевдоелементите:

::преди

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

::след

Вмъква съдържание след съдържанието на избрания елемент.

::първа буква

Стилизира първата буква от текст в елемент.

::селекция

Оформя частта от текста, която потребителят е избрал с курсора си.

::маркер

Стилизира полето на маркера на елемент от списък (напр. точка или номер в списък).

::щека

Прилага стилове към реплики в медийни елементи като

The ::преди и ::след псевдо елементи могат да бъдат особено трудни за разбиране, така че практикуването им ще ви помогне да овладеете останалото.

Прилики и разлики

Ето приликите и разликите между CSS псевдо-класове и псевдо-елементи:

Псевдо-класове

Псевдо-елементи

Синтаксис

С префикс едно двоеточие (:).

С префикс две двоеточия (::).

Използване

Изберете и стилизирайте елементи въз основа на тяхното състояние, позиция или взаимодействие с потребителя.

Стилизирайте конкретни части от съдържанието на елемент или създайте виртуални елементи.

Селектори

Може да се появи във всяка точка в комплексен или съставен селектор.

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

Вмъкване на съдържание

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

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

Типографски стил

Обикновено не се използва за типографски стил.

Използва се за текст и типографски стил (напр. ::първи ред, ::първа буква).

Целеви части

Насочва към цели елементи.

Насочва се към определени части от съдържанието на елемент.

Поддръжка на браузър

Като цяло добре поддържан.

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

Псевдокласовете и псевдоелементите са важни в CSS за създаване на различни стилове и интерактивни функции. Въпреки че имат някои прилики, всеки от тях има свои собствени уникални роли в уеб дизайна и разработката.

Псевдо-класове и псевдо-елементи в действие

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