css上下文选择器
程序员文章站
2022-04-15 11:39:32
...
家族: 祖宗,父辈,兄弟同辈关系
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></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>
以上就是css上下文选择器的详细内容，更多请关注其它相关文章！