Maison > Article > interface Web > sélecteur de contexte CSS
sélecteur de contexte CSS
- 无忌哥哥original
- 2018-06-28 17:19:022405parcourir
Famille : ancêtres, pères, frères et pairs
1. Éléments ancêtres : éléments comprenant des descendants multi-niveaux
2. Éléments parents : éléments comprenant uniquement des éléments enfants de premier niveau ;
3. Éléments adjacents : éléments avec le même parent ;
1. Sélecteur descendant : recherchez d'abord l'élément ancêtre, puis sélectionnez tous les éléments descendants spécifiés en dessous
Syntaxe : Utilisez des espaces pour séparer les ancêtres et les cibles. Il peut y avoir plusieurs niveaux. Utilisez plusieurs espaces pour séparer
Format : Ancêtre cible {declaration}
2. Sous-sélecteur : Recherchez d'abord l'élément parent. , puis sélectionnez tous les éléments descendants directs en dessous
Syntaxe : Parent> Élément cible {instruction de style>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style type="text/css">
.art p {
/*color:red;*/
}
.art > p {
/*color: green;*/
}
.art h1+p {
/*只会将h1后面紧邻的p变色*/
/*color:blue; */
}
.art p+p {
clor: red;
}
</style>
</head>
<body>
<article>
<h1>php中文网</h1>
<p>永久免费的在线教学网站</p>
<p>将公益进行到底</p>
<p>为了情怀,为了梦想,为了更多像我这样的PHP爱好者</p>
<section>
<h2>如何学习前端</h2>
<p>一定要多动手多写笔记进行总结</p>
</section>
<section>
<h2>原来大家是这样学习的呀~~</h2>
</section>
</article>
<hr>
<ul>
<li>1列表项</li>
<li>2列表项</li>
<li>3列表项</li>
<li>4列表项</li>
<li>5列表项</li>
</ul>
</body>
</html>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!