CSS 根据子元素选择父元素，并设置父元素的样式

在CSS中，直接根据子元素来选择并修改其父元素的样式是不可行的，因为CSS的选择器是按照从上到下的方式进行解析的，也就是说，它只能选择当前已经确定的元素，而不能预知未来的元素。

但是，你可以通过JavaScript来实现这个功能。以下是一个简单的例子，展示了如何根据子元素的状态来改变父元素的样式：

HTML:

<div class="parent">
  <p class="child">这是一个子元素</p>
</div>

CSS:

/* 初始化父元素的样式 */
.parent {
  background-color: #f0f0f0;
}
 
/* 当父元素的某个子元素满足特定条件时，更改父元素的样式 */
.parent .child:hover + .parent {
  background-color: #blue;
}

JavaScript:

// 获取父元素
var parent = document.querySelector('.parent');
// 获取子元素
var child = document.querySelector('.child');
 
// 监听子元素的事件，并在事件发生时改变父元素的样式
child.addEventListener('mouseenter', function() {
  parent.style.backgroundColor = '#blue';
});
 
child.addEventListener('mouseleave', function() {
  parent.style.backgroundColor = '#f0f0f0';
});

在这个例子中，当鼠标悬停在子元素上时，父元素的背景色会变成蓝色，鼠标离开时，背景色会恢复为初始的灰色。这个功能是通过JavaScript动态改变父元素的样式实现的。