css子代选择器多种写法

在CSS模块中，子代选择器是一种很有用的方式，它可以选择某个元素的子元素，并且只会选择到它的一层子元素。下面介绍几种不同的子代选择器写法。

  
  .parent p {}

空格是最常见的子代选择器分隔符，它可以选择到某个元素下的所有子元素（儿子、孙子……）。例如，上面代码可以选择所有在class为.parent的元素下的 p 元素。

  
  .parent > .child {}

大于号可以筛选出一个元素的第一层子元素。例如，上面代码可以选择 class 为.parent 的元素的class为.child的子元素。

  
  .parent + .brother {}

加号只能选择紧贴着父元素的下一个元素。例如，上面代码可以选择class为.parent的元素后紧随的class为.brother的兄弟元素。

  
  .a ~ .b {}

波浪号可以选择同级别中某个元素后面的所有元素。例如，上面代码可以选择class为.a的元素后面所有的class为.b的兄弟元素。

以上就是子代选择器的多种写法，根据不同的场景可以选用不同的写法，优化代码选用标准的写法，不仅可以提升阅读体验，也可优化性能。