CSS Combinators组合选择器

CSS Combinators是指在CSS选择器中，通过使用特定的符号组合多个选择器，以此来指定选择器之间的关系，从而更精确地匹配目标元素。

简介

组合选择器的主要作用是可以结合多个选择器来实现更具针对性的样式控制，其语法格式如下：

选择器A 选择器B

其中，选择器A是前面的选择器，选择器B是后面的选择器。这个组合选择器会匹配出同时满足选择器A和选择器B的元素。

类型选择器组合选择器

类型选择器是最常见的选择器之一，用于匹配HTML元素的标签名。组合选择器可以将多个类型选择器组合在一起，以选择更具体的元素。

语法：

tag1 tag2

这个组合选择器会选择所有tag1标签后代中匹配tag2标签的元素。

例如：

div p {
  color: red;
}

上述代码会将所有在div标签后代中的p标签的文本颜色设置为红色。

ID选择器组合选择器

ID选择器通常是用于对页面元素应用特定的样式。组合选择器可以将ID选择器和类型选择器混合起来使用，以选择更具体的元素。

语法：

#id tag

这个组合选择器会选择所有id为"id"的元素的后代中匹配tag标签的元素。

例如：

#header h1 {
  color: blue;
}

上述代码会将所有在id为"header"的元素后代中的h1标签的文本颜色设置为蓝色。

类选择器组合选择器

类选择器通常用于对多个元素都应用同样的样式。组合选择器可以将类选择器和类型选择器混合起来使用，以选择更具体的元素。

语法：

.class tag

这个组合选择器会选择所有class为"class"的元素的后代中匹配tag标签的元素。

例如：

.container .box {
  width: 100px;
}

上述代码会将所有在class为"container"的元素后代中的class为"box"的元素的宽度设置为100像素。

相邻兄弟组合选择器

这种组合选择器可以选择一个元素后紧跟着一个特定的兄弟元素。

语法：

tag1 + tag2

这个组合选择器会选择所有tag1标签后面第一个兄弟是tag2标签的元素。

例如：

h1 + p {
  margin-top: 0;
}

上述代码会将所有在h1标签后面第一个兄弟标签是p标签的元素的上边距设置为0。

通用兄弟组合选择器

这种组合选择器可以选择与先前选择的元素具有相同父元素的某个元素。

语法：

tag1 ~ tag2

这个组合选择器会选择所有tag1标签后面的兄弟中匹配tag2标签的元素。

例如：

h1 ~ p {
  text-indent: 1em;
}

上述代码会将所有在h1标签后面的兄弟标签是p标签的元素的首行缩进设置为一个字符宽度。

总结

CSS Combinators组合选择器可以为网页设计者提供更精确的控制，使他们可以创建出更柔性、更强大的Web设计方案。它与其他CSS选择器一起使用，可以让设计者以最少的代码为页面添加多种样式。