css上下文选择器有四种类型：1、后代选择器，可选择当前元素的所有后代元素；2、父子选择器，可选择当前元素的所有子元素；3、同级相邻选择器，可选择拥有共同父级且相邻的元素；4、同级所有选择器，可选择拥有共同父级的后续所有元素。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css的上下文选择器
上下文选择器就是构成了"父子"或层级关系的一组元素,通过他们的关系设置样式
html 文档,看上去就像一颗倒置的”树”,所以是有层级结构的
-
每一个元素, 在文档中, 都有自己的位置,即上下文关系
立即学习“前端免费学习笔记（深入）”；
所以, 完全可以根据元素的上下文关系,来获取到它们
魔法映像企业网站管理系统下载技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
一个元素的四种角色
| 序号 | 角色 | 描述 |
|---|---|---|
| 1 | 祖先元素 | 拥有子元素,孙元素等所有层级的后代元素 |
| 2 | 父级元素 | 仅拥有子元素层级的元素 |
| 3 | 后代元素 | 与其它层级元素一起拥有共同祖先元素 |
| 4 | 子元素 | 与其它同级元素一起拥有共同父级元素 |
四种上下文选择器
| 序号 | 选择器 | 操作符 | 描述 | 举例 |
|---|---|---|---|---|
| 1 | 后代选择器 | 空格 |
选择当前元素的所有后代元素 |
div p, body *
|
| 2 | 父子选择器 | > |
选择当前元素的所有子元素 | div > h2 |
| 3 | 同级相邻选择器 | + |
选择拥有共同父级且相邻的元素 | li.red + li |
| 4 | 同级所有选择器 | ~ |
选择拥有共同父级的后续所有元素 | li.red ~ li |
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上下文选择器</title>
<style>
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
/* 类选择器 */
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 后代选择器 */
.container div {
border: 1px solid coral;
}
/* 父子选择器,只有外层的div受影响 */
body > div {
border: 3px solid green;
}
/* 使用后代选择器模拟父子选择器 */
/* body div.container {
border: 3px solid green;
} */
/* 同级相邻选择器 */
/* 选择与第5个相邻的,即后面的"一个"元素 */
/* .item.center + .item {
background-color: lightgreen;
} */
/* 同级所有选择器 */
/* 选择与第5个后面的,有共同父级的所有兄弟元素 */
.item.center ~ .item {
background-color: lightgreen;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="item center">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>（学习视频分享：css视频教程）
