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
/*让超链接点击之前是红色*/
a:link {color: red;}
/*让超链接点击之后是橙色*/
a:visited {color: orange;}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover {color: green;}
/*鼠标点击链接，但是不松手的时候*/
a:active {color: black;}2.UI elements Sélecteur de pseudo-classe de statut
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}3. Sélecteur de pseudo-classe structurelle
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
