一、层级选择器的形式
层级选择器（也称上下文选择器）是指在CSS中通过选择其子元素或后代元素来选择某个元素。层级选择器有两个基本形式：
- 后代选择器：使用空格（“ ”）分隔元素，如“p span”表示选择所有p元素下的span元素。
- 子选择器：使用大于号（“>”）分隔元素，如“ul > li”表示选择ul元素下的所有直接子元素li。
二、层级选择器有哪些
CSS中除了后代选择器和子选择器之外，还有邻接选择器、通用兄弟选择器、属性选择器等。
- 邻接选择器：使用加号（“+”）分隔元素，表示选择紧接着前一个元素的下一个元素，如“h1 + p”表示选择紧接着h1元素后的第一个p元素。
- 通用兄弟选择器：使用波浪号（“~”）分隔元素，表示选择前面某个元素后面符合条件的所有兄弟元素，如“h1 ~ p”表示选择所有与h1元素在同一级别下的所有p元素。
- 属性选择器：用于按照属性选择元素，常见的属性选择器有属性选择器（如[type=“text”]）、子串匹配选择器（如[class*=”nav”]，表示含有“nav”关键词的所有class属性）、前缀匹配选择器（如[class^=”nav-”]，表示class属性以“nav-”开头的所有元素）等。
三、层次选择器有哪些
在CSS中也有层次选择器，但不同于层级选择器，层次选择器是指选择元素在文档树中的位置关系，常见的层次选择器有父元素选择器和子元素选择器。
- 父元素选择器：使用选择符“E：nth-child（n）”，其中n为数字，表示选择元素的第n个父元素，如“li:nth-child(2)”表示选择所有li元素的第二个父元素。
- 子元素选择器：使用选择符“E：nth-of-type(n)”，其中n为数字，表示选择元素的第n个类型相同的子元素，如“ul:nth-of-type(2)”表示选取文档中的第二个ul元素。
四、层级选择器的写法
层级选择器的写法非常简单，只需在选择器中使用空格或大于号分隔元素即可，例如：
/* 后代选择器 */
div p {
color: red;
}
/* 子选择器 */
ul > li {
color: blue;
}
五、层级选择器的应用
层级选择器可以应用于各种场景，例如：
- 改变某个特定元素及其子元素的样式；
- 表单样式设计，如输入框、文本域等；
- 导航菜单等。
六、层级选择器的特点
层级选择器具有以下几个特点：
- 层级选择器可以选择多个元素，使得样式的改变更方便；
- 使用层级选择器可以避免同一元素被多处重复选择；
- 层级选择器选择的元素具有明确的上下文关系，可以减少浏览器的查找范围，提升性能。
七、层级选择器中子选择器的写法
子选择器的写法非常简单，只需在选择器中使用大于号分隔元素即可，例如：
/* 子选择器 */
ul > li {
color: blue;
}
八、层级选择器怎么设置超链接
层级选择器可以和超链接一起使用，只需将超链接加入到层级选择器的元素中即可，例如：
/* 后代选择器 */
nav a {
color: red;
}
/* 子选择器 */
ul > li > a {
color: blue;
}
九、伪类选择器选取3~5个与层级选择器相关的做为小标题
伪类选择器也可以和层级选择器一起使用，如：
- :hover伪类选择器：鼠标移动到元素上时生效，使用方法为“：hover”。
- :visited伪类选择器：选择所有已被访问过的链接，使用方法为“：visited”。
- :nth-child伪类选择器：选择某个元素下的第n个子元素，使用方法为“：nth-child(n)”。
- :active伪类选择器：激活状态，使用方法为“：active”。
- :focus伪类选择器：当元素获得焦点时生效，使用方法为“：focus”。
