Aujourd'hui, nous allons vous parler de l'utilisation et des connexions et différences associées entre le sélecteur d'attribut et le pseudo sélecteur de classe Voici un petit exemple.
Sélecteur d'attribut :
[attr~="value"] Mot Mot Espace Mot Le mot doit être valide
[attr|="valeur"] La valeur commence par ou valeur - Word
Remarque :
la sélection d'attributs est difficile à utiliser la règle expression pour identifier les éléments sélectionnés, ce qui est plus efficace
sélecteur de pseudo-classe :
: avant
: après
:lang(val) val/val-word
:nth-child(n) nfrom À partir de 1 base impaire pair pair
: le sélecteur nth-of-type(n) correspond à chaque élément qui est le Nième élément enfant d'un type spécifique de l'élément parent.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
</body>
</html>
Css部分：
@charset "utf-8";
/* CSS Document */
/*
p:before{
content:"ccc";
}
p:lang(en){
border:1px solid #ff0000;
}
p:nth-child(even){
background:#F00;
}
*/
p:nth-of-type(3){ /* p标记的父元素 下的 第3个p元素*/
background:#F00;
}Lecture connexe :
Comment masquer le contenu qui déborde d'un DIV
Quelles sont les techniques de mise en page CSS
En CSS Comment définir le style de police
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!
Introduction aux attributs des balises d'article
Comment utiliser la fonction fit en Python
Code source du site Web
Comment utiliser la fonction Print() en Python
Quel logiciel est Dreamweaver ?
Solutions aux caractères chinois tronqués
python emballé dans un fichier exécutable
utilisation de la fonction de tri c++sort
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
