前端 css复合选择器

CSS复合选择器是由两个或多个基本选择器组合而成的选择器，它们之间没有空格，用于匹配符合多个条件的元素。以下是几种常用的CSS复合选择器：

1. 类型选择器 + 类选择器

p.warning 选择所有类名为“warning”的段落元素。

2. 类型选择器 + ID选择器

div#header 选择所有ID为“header”的div元素。

3. 类型选择器 + 属性选择器

a[target="_blank"] 选择所有具有target属性且值为“_blank”的锚元素。

4. 类型选择器 + 伪类选择器

a:hover 选择所有被鼠标悬停的锚元素。

5. 类选择器 + 类选择器

.btn-primary.active 选择所有同时包含“btn-primary”和“active”类的元素。

6. 类选择器 + ID选择器

#sidebar .widget 选择ID为“sidebar”内所有类名为“widget”的元素。

7. 类选择器 + 属性选择器

.btn[type="submit"] 选择所有类名为“btn”且type属性值为“submit”的元素。

8. 类选择器 + 伪类选择器

.accordion-item:first-child 选择所有类名为“accordion-item”的第一个元素。

以上是一些常见的CSS复合选择器，它们可以帮助我们更精确地定位元素，实现更丰富的样式效果。