Introduction aux sélecteurs CSS

Sélecteur de balise

Par exemple :

`p`、`a`、`h[1,6]`、`span`、`div`、、、

Sélecteur de classe (classe)

le sélecteur de classe est défini avec ".".

Par exemple :

.id1{样式属性：值;}

Essayez de ne pas utiliser de traits de soulignement dans les noms, car cela pourrait entraîner des problèmes de compatibilité. Les traits de soulignement sont généralement utilisés dans JS et n'utilisent pas de nombres purs ou de noms chinois.

Par exemple :

<div class="class1"></div>

Remarque : Le sélecteur de classe

comprend également le sélecteur de nom multi-classe

<div class="class1 class2.."></div>

(recommandation du didacticiel vidéo : tutoriel vidéo CSS)

Sélecteur d'ID

le sélecteur d'ID est défini avec "#". Par exemple : #id1{attribut de style : valeur ;} méthode de dénomination telle que le sélecteur de classe

Par exemple :

<div id="id1"></div>

sélecteur de caractères génériques

*{样式属性：值;}

Sélecteur de pseudo-classe

Sélecteur de pseudo-classe de lien (principalement pour la balise a qui peut être absent mais l'ordre ne peut pas être inversé)

:link  /*未访问的链接*/:visited  /*已访问的链接*/:hover  /*鼠标移动到链接上*/     
最常用的链接伪类选择器:active  /*选定的链接 别松开的状态*/

Structure (position) pseudo Sélecteur de classe CSS3

:first-child Sélectionne le sélecteur spécifié qui appartient au premier élément enfant de son élément parent

:last-child Sélectionne le dernier enfant élément qui appartient à son élément parent Le sélecteur spécifié

:nth-child(N) correspond à chaque élément qui est le Nième élément enfant de son élément parent, quel que soit le type de l'élément, en comptant à partir du dernier élément enfant. N peut être un nombre, un mot clé ou une formule

Mot clé : impair est un nombre impair pair est un nombre pair

Expression : 2n nombre pair 2n+1 nombre impair n est un multiple

:nth -last-child() compte à partir du dernier élément enfant. La valeur par défaut est le premier élément

sélecteur de pseudo-classe cible

 : sélection de pseudo-classe cible Le sélecteur peut être utilisé pour sélectionner l'élément cible actuellement actif

Sélecteur d'élément enfant

Le sélecteur d'élément enfant ne peut sélectionner que les éléments qui sont éléments enfants d'un élément.

Écriture :

Le parent vient en premier, le sous-ensemble vient après et le milieu est connecté avec >

Remarque :> , à l'exclusion des petits-enfants. Seul l'ensemble des fils n'utilise pas >, vous pouvez sélectionner tous les descendants

Sélecteur d'attribut

Sélecteur avec certains attributs spéciaux dans la balise de sélection peut Utiliser le sélecteur d'attribut

pour écrire : a[title] {} Le sélecteur d'attribut est représenté par des crochets div[class^=font] { } div[class$=font] { } commençant with font La terminaison div[class*=tao] { } signifie que tao peut être dans n'importe quelle position.

Sélecteur de pseudo-élément (CSS3)

.dome Sélecteur de classe : premier enfant Sélecteur de pseudo-classe : sélecteur de pseudo-élément de première lettre

E::first-letter Le premier mot ou caractère du texte

E::first-line La première ligne du texte

E::selection Peut changer le Style du texte sélectionné (souris)

E::before{ content: "text" } à l'intérieur de la zone avant (ajouter une police)

E::after{ content: "text" } à l'intérieur du case après (Ajouter une police)

Tutoriel recommandé :

Démarrage rapide CSS

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!