参考资料

  1. css3阴影效果
  2. CSS阴影颜色
  3. Flexbox 布局有哪些高级用法？
  4. flex-wrap: wrap/nowrap详细说明
  5. CSS阴影透明度设置
  6. 如何用Flex布局制作响应式布局？
  7. css阴影效果代码
  8. 如何提高Flex布局的性能？详细说明

通配符选择器（*）用于匹配文档中的所有元素，无论其类型、类名或ID。它通常用于全局样式设置，但应谨慎使用，因为它会影响所有元素，可能导致性能问题或意外覆盖其他样式。

语法

* {
  /* 样式规则 */
}

案例1：全局样式重置

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

作用：将所有元素的外边距、内边距设为0，并将盒模型设置为border-box。

案例2：全局字体设置

* {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

作用：为所有元素设置相同的字体和字号。

案例3：与其他选择器结合

.container * {
  color: blue;
}

作用：仅对.container内部的所有元素应用蓝色文本颜色。

注意

  • 通配符选择器可能会影响性能，尤其是在复杂页面中。

  • 尽量避免过度使用，以免覆盖其他特定样式。