参考资料

1. 如何避免Flex容器高度塌陷？
2. 元素选择器详细说明以及案例
3. CSS阴影透明度设置
4. Flexbox布局有哪些常见的误区？
5. CSS响应式详细说明以及案例
6. css怎么使div居中
7. 子选择器详细说明以及案例
8. css样式div居中

后代选择器详细说明以及案例

后代选择器用于选择某个元素的后代元素，通过空格分隔两个选择器。格式为 A B，其中 A 是祖先元素，B 是后代元素。

示例

<div class="container">
  <p>这是一个段落。</p>
  <span>这是一个span。</span>
  <div>
    <p>这是嵌套的段落。</p>
  </div>
</div>

.container p {
  color: red;
}

解释

• .container p 选择所有在 .container 元素内的 <p> 元素，无论嵌套层级。

• 因此，<p>这是一个段落。</p> 和 <p>这是嵌套的段落。</p> 都会应用 color: red; 样式。

结果

• 页面中所有在 .container 内的 <p> 元素文本颜色变为红色。