sélecteur de pseudo-classe CSS

sélecteur de pseudo-classe CSS

/*sélecteur d'élément*/

ul {

padding : 0;

marge : 0 ;

largeur : 450px;

bordure : 1px pointillé #666;

remplissage : 10px 5px;

}

ul:after { /*Le bloc enfant ouvre le bloc parent*/

content:'' /*Ajouter un élément de contenu vide à la fin de l'élément enfant*/

display: block; /*Et réglé sur l'affichage au niveau du bloc*/

clear:both /*Effacer les flotteurs des deux côtés*/

/*visibilité : aucun; !*caché également Ligne*!*/

/*hauteur : 0;*/

/*_hauteur : 1% !*Pour IE*!*/}

li { list -style: none; /*Supprimer le style d'élément de liste par défaut*/

float: left /*Left float*/

width: 40px; la largeur*/

hauteur : 40px ; /*Définir la hauteur*/

line-height : 40px /*Centrer le texte verticalement*/

text-align; : center; /*Centrer le texte horizontalement*/

border-radius: 50%; /*Définir les coins arrondis de la bordure*/

background: skyblue;

margin-right : 5px ; /*Marge droite entre chaque boule*/}

/*:before : Insérer avant le sélecteur spécifié, la valeur par défaut est un élément en ligne*/

ul:before {/* Insérer du texte*/content : 'Site Web PHP chinois'

/*Convertir en élément de blocage*/ display: block }

ul:before { /*Convertir en élément de bloc*/display : block;

/*content: url(../html/images/5.jpg);*/

/*content: '' ; */

/*La taille ne peut être définie que si l'image est définie comme arrière-plan*/

/*background-image: url(../html/images/5. jpg);*/

/* taille de l'arrière-plan:100px 100px;*/

/*hauteur : 100px */

/*largeur : 100px;*/ >

/*:after:in Ajoutez des éléments après l'élément spécifié. La valeur par défaut est un élément en ligne, qui peut être du texte, une image ou même une vidéo. /*content:'www.php.cn';*/

/*color:red;*/}

/*:first-child : Sélectionnez le premier élément enfant du parent element*/

/*Remarque : Dans la page actuelle, il n'y a qu'un seul élément ul, donc le parent ul*/

ul li:first-child {

background -color: brown;}

/*:last- child : Sélectionnez le premier élément enfant dans l'élément parent */

ul li:last-child {

background -color: lightgreen;}

/*:only -child : Sélectionnez l'élément qui est le seul élément enfant dans l'élément parent actuel qui ne prend pas en charge */

p:only-. child {

/*Parmi les deux divs, seulement le premier. Il n'y a qu'un seul élément enfant

dans le div, et seulement le

*/

/* color:red;*/}

/ dans le premier div est sélectionné. *only-of-type : sélectionne le seul élément

le type (nom de la balise) de l'élément enfant est spécifié*/

p:only- of-type {

/*Commentez d'abord l'enfant unique ci-dessus. Après l'exécution, vous trouverez d'abord. ce p dans le troisième div sera également sélectionné car c'est le seul élément enfant avec le type p spécifié */

color:red;}

La différence entre only-child et only. -of-type :

1. Points communs : les deux sélectionnent le seul dans l'élément parent Élément enfant

2. Différence : seul-enfant ne limite pas le type d'élément enfant, only-of-type : limite le type de l'élément enfant, par exemple, il doit s'agir d'une balise p

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!