如何选中两层深div中包含radio输入框的div并设置样式？

选中包含radio的父div的方案 #

目前主流现代浏览器已支持CSS :has() 伪类，无需加类名就可以选中包含指定子元素的父容器，写法如下：

.container > div:has(input[type="radio"]) {
  /* 此处为父div的自定义样式，示例如下 */
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #eee;
}

如果需要兼容不支持:has()的旧版浏览器，纯CSS无法实现选中父元素的需求，可直接针对radio输入框设置样式。

单独为radio输入框设置样式的方案 #

你原有写法的选择器本身可以正确匹配到radio元素，样式不生效是因为原生表单元素的默认外观受浏览器内置样式限制，直接设置border不会生效，需要先清除默认外观，调整后的代码如下：

.container > div > input[type="radio"] {
  /* 清除浏览器默认样式 */
  appearance: none;
  -webkit-appearance: none;
  /* 自定义尺寸和基础样式 */
  width: 16px;
  height: 16px;
  border: 1px solid green;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  top: 2px;
}

/* 额外补充选中状态的样式，符合常规交互逻辑 */
.container > div > input[type="radio"]:checked {
  background-color: green;
  box-shadow: inset 0 0 0 3px #fff;
}

内容的提问来源于stack exchange，提问作者Eric Nguyen