Qu'est-ce qu'un sélecteur de pseudo-classe en CSS ? Une brève introduction aux sélecteurs de pseudo-classes

Ce chapitre vous dira ce qu'est un sélecteur de pseudo-classe en CSS ? Une brève introduction aux sélecteurs de pseudo-classes. Laissez tout le monde comprendre le rôle des sélecteurs de pseudo-classe en CSS, quelles sont les classifications des sélecteurs de pseudo-classe CSS et d'autres connaissances. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. (Recommandations associées : "Tutoriel CSS")

1. Introduction aux sélecteurs de pseudo-classe

Le sélecteur de pseudo-classe (appelé : pseudo-classe) est défini par deux points, qui définit l'état de l'élément, tel que clic enfoncé, clic terminé, etc. La pseudo-classe peut être utilisée pour modifier le style de l'état de l'élément.

La fonction de la pseudo-classe est similaire au style d'élément dans le DOM général, mais contrairement au style d'élément dans le DOM général, elle ne modifie aucun contenu du DOM. Il insère simplement quelques éléments modifiés, visibles par l'utilisateur mais invisibles dans le DOM. L'effet d'une pseudo-classe peut être obtenu en ajoutant une classe réelle.

Que sont les pseudo-classes ?

C'est la classe intégrée de CSS elle-même qui lui donne certaines fonctionnalités et fonctions, c'est-à-dire que vous n'avez pas besoin de classe=. ... ou id=... Vous pouvez l'utiliser directement. Bien entendu, vous pouvez également modifier certains de ses attributs, tels que : a:link{color:#FF0000;}

<.> 2. Sélecteur de pseudo-classe La classification des sélecteurs de pseudo-classe

peut être principalement divisée en : sélecteurs de pseudo-classe dynamiques, sélecteurs de pseudo-classe d'état d'élément d'interface utilisateur, des sélecteurs de pseudo-classe structurels et des sélecteurs de pseudo-classe négatifs.

La syntaxe du sélecteur de ces catégories est présentée en détail ci-dessous :

1. Syntaxe du sélecteur de pseudo-classe dynamique

• E: lien (sélecteur de pseudo-classe de lien) : sélectionne l'élément E correspondant, et l'élément correspondant est défini comme un lien hypertexte et n'a pas été visité. Couramment utilisé sur les points de dessin de liens

• E:visited (sélecteur de pseudo-classe de lien) : sélectionne les éléments E correspondants, et les éléments correspondants sont définis avec des hyperliens et ont été visités. Couramment utilisé sur les points de dessin de liens

• E:active (sélecteur de comportement utilisateur) : sélectionnez l'élément E correspondant et l'élément correspondant est activé. Couramment utilisé sur les traits de lien et les boutons

• E:hover (sélecteur de comportement de l'utilisateur) : sélectionnez l'élément E correspondant et la souris de l'utilisateur reste sur l'élément E. Les navigateurs IE6 et inférieurs ne prennent en charge que a:hover

• E:focus (sélecteur de comportement utilisateur) : sélectionnez l'élément E correspondant et l'élément correspondant obtient le focus

Le sélecteur de pseudo-classe dynamique peut être utilisé dans l'application de lien hypertexte vers une balise :

une balise comporte 4 pseudo-classes (correspondant à quatre états), comme suit :

• :lien "Lien" : Avant que le lien hypertexte soit cliqué

• :visité "Visité" : Après la visite du lien

• :hover "Hover" : Lorsque la souris est posée sur l'étiquette

• :active "Activate" : Lorsque la souris clique sur l'étiquette mais ne la lâche pas.

Exemple de code :

/*让超链接点击之前是红色*/
a:link {color: red;}

/*让超链接点击之后是橙色*/
a:visited {color: orange;}

/*鼠标悬停，放到标签上的时候是绿色*/
a:hover {color: green;}

/*鼠标点击链接，但是不松手的时候*/
a:active {color: black;}

Il y a un certain ordre pour ces quatre sélecteurs de pseudo-classe de la balise a, et l'ordre entre chaque style est très particulier Une fois qu'une erreur d'arrangement se produit, elle est susceptible d'être écrasée, empêchant l'affichage de l'un des styles. Alors, comment ces quatre sélecteurs de pseudo-classe de la balise a doivent-ils être triés avant de pouvoir être utilisés ?

Dans la définition CSS, a:hover doit être placé après a:link et a:visited pour être efficace, et a:active doit être placé après a:hover pour être efficace.

Ainsi, l'ordre des quatre sélecteurs de pseudo-classe de la balise a est : a:link, a:visited, a:hover, a:active

2.UI elements Sélecteur de pseudo-classe de statut

• E:checked (sélecteur de pseudo-classe de statut vérifié) : correspond au bouton de vérification ou à l'élément de formulaire de bouton radio sélectionné

• E:enabled (sélecteur de pseudo-classe de statut activé) : correspond à tous les éléments de formulaire activés

• E:disabled (sélecteur de pseudo-classe de statut désactivé) : correspond à tous les formulaires désactivés elements

Le sélecteur de pseudo-classe de statut d'élément d'interface utilisateur est principalement utilisé pour opérer sur l'élément Form en HTML. Le plus courant est que notre "type="text" a activé et désactivé. a deux états, le premier est accessible en écriture et le second n'est pas disponible ; de plus, "type="radio" et "type="checkbox"" ont deux états : "coché" et "non coché". Regardons deux exemples. Par exemple, si vous souhaitez distinguer la zone de texte "désactivée" des autres zones de texte, vous pouvez l'utiliser comme ceci :

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

Remarque : IE6-8 ne prend pas en charge " :checked" ",":enabled", ":disabled" sont les trois sélecteurs.

3. Sélecteur de pseudo-classe structurelle

• E:fisrt-child : élément E comme premier élément enfant de l'élément parent. Équivalent à E:nth-child(1)

• E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同    

• E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同    

• E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.    

• E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同    

• E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素    

• E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素    

• E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同    

• E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同    

• E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素    

• E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素    

• E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点    

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

结构伪类选择器很容易遭到误解，需要特别强调。如：

p:first-child;

它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

注意：

结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.否定伪类选择器

E:not(F)：匹配所有除元素F外的E元素

例：对form中所有input加边框，但又不想submit也起变化，就可以这样写：

input:not([type="submit"]) {border: 1px solid red;}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!