什么是层级选择器
在CSS中，层级选择器是用于指定一组元素的样式，这组元素具有相同的祖先元素或可以为某个祖先元素的后代元素，而不必为每个元素单独指定样式。简单来说，它是通过嵌套关系来选择元素。
层级选择器通常用于处理复杂的DOM结构，因为它可以帮助我们减少CSS代码的重复，并且提高了样式的可读性和可维护性。
如何使用层级选择器
1. 空格选择器
空格选择器是一种基础的层级选择器，它使用空格（' '）来选择一个元素的后代元素。下面的代码将选择所有 p 元素的后代元素中的 strong 元素：
p strong {
color: red;
}
这意味着，只要 strong 元素是 p 元素的后代，且在 HTML 结构中位于 p 元素内，它就会受到样式的影响。
重要提示：空格选择器并不要求两个元素之间有严格的父子关系。只要一个元素在另一个元素的内部，它就可以被空格选择器选中。
2. 大于号选择器
大于号选择器（'>'）选择某个元素的直接子元素。下面的代码将选择所有 .container 元素的直接子元素中的 h3 元素：
.container > h3 {
font-weight: bold;
}
这意味着，只有h3元素是.container元素的直接子元素时，它才会受到样式的影响。
3. 加号选择器
加号选择器（'+'）选择某个元素后面紧跟着的同级元素。下面的代码将选择所有 p 元素后面紧跟着的同级元素中的 span 元素：
p + span {
color: blue;
}
这意味着，只有当span元素是紧跟在p元素后面的同级元素时，它才会受到样式的影响。
4. 波浪线选择器
波浪线选择器（'~'）选择某个元素后面的所有同级元素。下面的代码将选择所有 h2 元素后面的所有同级元素中的 p 元素：
h2 ~ p {
font-size: 14px;
}
这意味着，只要p元素位于某个 h2 元素后面的同级位置上，它就会受到样式的影响。
层级选择器的使用技巧
1. 避免使用超过三层的选择器
虽然层级选择器可以方便地选择DOM中的元素，但是它也容易导致选择器变得非常复杂和冗长。这不仅会影响代码的可读性和可维护性，还会降低页面的性能。
因此，我们应该尽可能避免使用超过三层的选择器，并且尽量简化选择器的嵌套结构。
.container .sidebar div > ul li a span {
font-size: 14px;
}
上面的代码使用了五层选择器，它可以被简化成以下代码：
.sidebar li a span {
font-size: 14px;
}
2. 组合使用不同类型的选择器
我们可以组合使用不同类型的选择器，来更加灵活地选择元素。例如，可以使用空格选择器和大于号选择器结合使用，来选择特定层级的元素：
.container .sidebar > ul > li > a {
color: red;
}
上面的代码选择的是 .container 元素内的 .sidebar 元素下的 ul 元素下的 li 元素下的 a 元素。这种组合使用的方式可以减少选择器的层数，同时保持语义的正确性。
3. 对关键元素使用类选择器
在页面中，有一些元素是比较关键的，它们的样式会被频繁地修改。在这种情况下，我们可以给这些元素添加类名，并针对这些类名使用样式。
例如，我们可以给导航栏添加一个 .nav 的类名，并使用类选择器来对它进行样式处理：
.nav {
background-color: #333;
color: #fff;
font-size: 16px;
}
这样，我们就可以在页面中轻松地修改导航栏的样式，而不必重新编写选择器。
4. 减少元素数量
当我们处理样式时，应该尽可能减少页面中的元素数量。这可以通过修改HTML结构，或者使用伪元素和伪类来实现。
例如，我们可以使用 ::before 和 ::after 伪元素来添加一些装饰性的元素，而不必增加HTML中的元素数量：
.btn ::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
margin-right: 5px;
}
.btn-primary ::before {
background-color: blue;
}
.btn-danger ::before {
background-color: red;
}
上面的代码中，我们使用 ::before 伪元素来添加了一个小圆点，用来区分不同类型的按钮。
总结
层级选择器是CSS中常用的一种选择器，它可以通过嵌套关系来选择元素，并且可以减少CSS代码的重复。然而，过度使用层级选择器会导致代码变得冗长和难以维护，因此我们应该尽可能减少选择器的嵌套层数，并采用合适的形式来选择元素。