Rumah >hujung hadapan web >tutorial css >css上下文选择器
css上下文选择器
- 无忌哥哥asal
- 2018-06-28 17:19:022504semak imbas
家族: 祖宗,父辈,兄弟同辈关系
1.祖先元素: 包括多级后代的元素;
2.父级元素: 仅包括一级子元素的元素;
3.相邻元素: 拥有同一个父级的元素;
1.后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素
语法: 祖先与目标之间用空格分开,可以有多级,用多个空格区隔
格式: 祖先 目标 {声明}
2.子选择器:先找到父级元素,再选择他下面所有直接后代元素
语法: 父级 > 目标元素 {样式声明}
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>Atas ialah kandungan terperinci css上下文选择器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css伪类选择器Artikel seterusnya：css盒子模型说明以及实例