css上下文选择器

无忌哥哥原创: 2018-06-28 17:19:022012浏览

家族: 祖宗,父辈,兄弟同辈关系

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>

以上就是css上下文选择器的详细内容，更多请关注php中文网其它相关文章！

css css选择器，css上下文选择器 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：css伪类选择器下一条：css盒子模型说明以及实例