最新【CSS】CSS入门笔记第二弹~_css 父元素，熬夜整理最新大厂大数据开发高频面试题

在CSS中，父元素（也称为父级元素）是指包含其他元素的元素。CSS提供了一些方法来选择和操作父元素，以下是一些常用的方法：

1. 使用:has()选择器（CSS Level 4规范，目前大多数浏览器不支持）

/* 选择直接包含<p>元素的父元素 */
parent:has(> p) {
  color: red;
}

2. 使用:not()和:empty组合选择具有特定子元素的父元素

/* 选择至少有一个<p>子元素的父元素 */
parent:not(:empty) > :not(parent) > p {
  color: blue;
}

3. 使用通用兄弟组合器~选择特定兄弟元素的父元素

/* 选择紧跟一个<p>兄弟元素的父元素 */
parent > p ~ :not(p) {
  background-color: yellow;
}

4. 使用:first-child和:last-child选择第一个或最后一个子元素的父元素

/* 选择其第一个子元素是<p>的父元素 */
parent > :first-child:is(p) {
  border: 1px solid green;
}

5. 使用:nth-child()选择特定子元素的父元素

/* 选择其第一个子元素是<p>的父元素 */
parent > :nth-child(1):is(p) {
  outline: 2px dashed purple;
}

请注意，这些示例可能需要根据实际情况进行调整，以适应不同的HTML结构和需求。在实际开发中，选择父元素的策略可能会根据特定的设计需求和用例而变化。