Maison >interface Web >tutoriel CSS >Comment utiliser les sélecteurs d'attributs et les sélecteurs de pseudo-classe
Comment utiliser les sélecteurs d'attributs et les sélecteurs de pseudo-classe
- php中世界最好的语言original
- 2017-11-24 10:00:432476parcourir
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!