[分享]css关系选择运算符

CSS中的关系选择运算符可以用于选择一组元素中的某些特定元素。有四种类型的运算符：子选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器。/ 子选择器（child selector） / contain...

CSS中的关系选择运算符可以用于选择一组元素中的某些特定元素。有四种类型的运算符：子选择器、后代选择器、相邻兄弟选择器和一般兄弟选择器。

/* 子选择器（child selector） */
container > ul {
  margin-left: 20px;
}

/* 后代选择器（descendant selector） */
container li {
  color: red;
}

/* 相邻兄弟选择器（adjacent sibling selector） */
h2 + p {
  font-size: 16px;
}

/* 一般兄弟选择器（general sibling selector） */
h2 ~ p {
  font-size: 14px;
} 

子选择器使用“>”符号，用于选择一个元素的直接子元素。例如，上面的代码会选择container元素下的ul元素。而后代选择器则使用空格符号，用于选择一个元素的所有后代元素。例如，上面的代码会选择container元素下所有的li元素。

相邻兄弟选择器使用“+”符号，用于选择一个元素的下一个兄弟元素。例如，上面的代码会选择一个h2元素后面的第一个p元素。一般兄弟选择器使用“~”符号，用于选择一个元素之后所有的兄弟元素。例如，上面的代码会选择一个h2元素之后的所有p元素。

使用关系选择运算符可以更加灵活地选择元素，使得我们可以只选择需要的元素而忽略其他元素。但是过多的使用这些运算符可能会影响CSS选择器的性能，因此需要谨慎使用。