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
Qu'est-ce qu'un ETF Bitcoin ?
webstorm a été remplacé par la version chinoise
Comment commenter le code en HTML
Comment fermer le port 135 445
Comment résoudre une erreur dans le script de la page actuelle
Comment vérifier l'utilisation de la mémoire JVM
Introduction au document en JS
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
