最全【CSS】CSS入门笔记第二弹~_css 父元素，2024年最新2024金九银十大数据开发大厂面试题来袭

在CSS中，父元素选择器（Parent Selectors）是一种选择器，用于选择包含特定子元素的父元素。CSS目前没有直接的父元素选择器，但是可以通过一些技巧实现类似的效果。

1. 使用后代选择器结合 :not() 伪类选择器：

/* 选择包含 .child 类的父元素，但不包含 .exclude 类 */
.parent:not(.exclude) .child {
  /* 样式规则 */
}

2. 使用相邻兄弟选择器（Adjacent Sibling Selector）结合 + 或者通用兄弟选择器（General Sibling Selector）结合 ~：

/* 选择 .child 类元素紧随其后的兄弟元素，且这个兄弟元素在同一父元素中 */
.child + .sibling {
  /* 样式规则 */
}
 
/* 选择 .child 类元素后的所有兄弟元素，且这些兄弟元素在同一父元素中 */
.child ~ .sibling {
  /* 样式规则 */
}

3. 使用CSS伪类 :has()（目前处于实验阶段，不是所有浏览器都支持）：

/* 选择含有 .child 类子元素的父元素 */
.parent:has(.child) {
  /* 样式规则 */
}

请注意，:has() 选择器目前是实验性的，不是所有浏览器都支持。在编写CSS时，应该检查浏览器的兼容性。

以上方法可以实现基本的父元素选择器效果，但并不是真正意义上的“父元素选择器”。CSS 选择器还有许多其他类型，可以根据需要进行选择和使用。