有趣且重要的css知识合集知道子元素，如何修改父元素样式？

在CSS中，知道子元素并修改其父元素的样式可以通过几种方法实现，但是CSS本身并不直接支持反向选择父元素。不过，有几种方法可以间接实现这个需求：

1. 使用:focus-within伪类（适用于需要交互的情况，如鼠标悬停或输入框聚焦时）。
2. 使用JavaScript来动态添加或修改父元素的类。
3. 使用CSS中的::before或::after伪元素来添加内容到父元素中。

以下是使用:focus-within伪类的例子：

/* 当input获得焦点时，它的父元素会变色 */
.parent:focus-within {
  background-color: yellow;
}

HTML结构：

<div class="parent">
  <input type="text" />
</div>

使用JavaScript的例子：

document.querySelector('.child').addEventListener('click', function() {
  this.closest('.parent').style.backgroundColor = 'yellow';
});

HTML结构：

<div class="parent">
  <button class="child">Click me</button>
</div>

请注意，虽然CSS本身不支持直接反向选择父元素，但是可以通过其他方式（如JavaScript）来实现这种效果。