Псевдоклассы CSS

псевдоклассы

CSS псевдоклассы выбирают элементы не по их именам, а по их государственный.

Например, если вы хотите установить стиль для разных состояний (активное, наведение и т. д.) гиперссылки, вы не можете сделать это, просто выбрав a элемент. В этих случаях вам необходимо использовать псевдоклассы CSS.

Псевдоклассы CSS всегда начинаются с «:».

синтаксис:

 elementName: CSS_Pseudo_Class {Свойство CSS: значение;  ........................} 

CSS: псевдоклассы первого ребенка

CSS: псевдоклассы первого ребенка выбирают первый дочерний элемент элемента. Он игнорирует всех остальных дочерних элементов в выбранном элементе, даже если они доступны.

Пример CSS: псевдоклассы первого ребенка

CSS-код:

  div> p: first-child {цвет фона: салатовый; /* устанавливает цвет фона как салатовый */color: darkgreen; /* устанавливает светло-желтый цвет текста */}  

HTML code:

       Пример первого дочернего псевдокласса CSS     

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Donec a urna elit. Целое число malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.

Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod nulla id nulla suscipit sollicitudin.

Результат

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Donec a urna elit. Целое число malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.

Quisque aliquam nunc vel arcu varius aliquam. Vestibulum euismod nulla id nulla suscipit sollicitudin.

Просмотрите этот пример первого дочернего псевдокласса CSS в отдельном окне браузера.

Псевдоклассы ссылок CSS -: link и: посещенные

CSS: псевдоклассы ссылок используется для описания презентации для ссылок, которые еще не были посещены.

CSS: псевдокласс посещенных используется для описания презентации после того, как ссылка была посетил пользователь.

Пример псевдоклассов ссылок CSS -: link и: посещено

CSS-код:

  a: link {color: red}/* устанавливает красный цвет ссылки */a: visit {color: darkgreen}/* устанавливает темно-зеленый цвет посещенной ссылки * / 

HTML-код:

       Пример ссылки CSS и посещенных псевдоклассов      руководства по w3resource     

Просмотрите этот пример псевдоклассов CSS-ссылок -: link и: посещено в отдельном окне браузера.

Динамические псевдоклассы CSS:: hover,: active и: focus

CSS: hover псевдокласс используется для описания представления гиперссылки, когда пользователь наводит на нее указатель мыши (или любое другое указывающее устройство).

CSS: active pseudo class используется для описания представления гиперссылки, когда пользователь нажимает на нее кнопку мыши (или любого другого указывающего устройства), но еще не отпустил ее.

CSS: активный псевдокласс используется для описания представления гиперссылки, когда пользователь фокусируется (т. Е. Принимает события клавиатуры или другие формы ввода текста) на ней.

CSS-код:

  a: active {color: yellow}/* устанавливает желтый цвет активной ссылки */a: hover {color: pink}/ * устанавливает розовый цвет при наведении ссылки */a: focus {color: maroon}/* устанавливает бордовый цвет фокуса ссылки */ 

HTML-код:

       Пример ссылки CSS и посещенных псевдоклассов      руководства по w3resource      

Просмотрите этот пример CSS-псевдоклассов-динамических-псевдоклассов-hover-active-and-focus в отдельном окне браузера.

Псевдоклассы CSS :: lang

Псевдокласс CSS: lang (languageName) соответствует, если элемент находится на языке - languageName .

Код CSS:

 : lang (fr) {color: red;}   

HTML-код:

       Пример CSS: псевдоклассы lang     

L'élève va à l'école et ceci est écrit en Français!

Этот текст приветствуется осуществляется таблицей стилей.

Просмотрите этот пример псевдоклассов CSS:: lang в отдельном окне браузера.

Оцените статью
nanomode.ru
Добавить комментарий