recherche

Maison  >  Article  >  interface Web  >  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中世界最好的语言
php中世界最好的语言original
2017-11-24 10:00:432443parcourir

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser l'ombre de la police CSS3 text-shadowArticle suivant：Comment utiliser l'ombre de la police CSS3 text-shadow

Articles Liés

Voir plus