根据子元素ID选择其父级div的CSS选择器问题

要选择包含指定复选框的div，可根据需求使用以下CSS选择器：

1. 选择包含id为id_FRA10000的复选框的div（无论复选框是否选中） #

直接使用:has选择器定位包含目标复选框的div即可，结合div的form-check类可以更精准：

div.form-check:has( #id_FRA10000 )

如果不需要类名过滤，也可以用更通用的写法：

div:has( #id_FRA10000 )

2. 选择包含未选中状态的id_FRA10000复选框的div #

你之前的选择器div:has( #id_FRA10000:not(:checked) )逻辑是对的，但无效的原因是：你的HTML中复选框带有checked=""属性——在HTML里，checked是布尔属性，只要标签中存在该属性（无论属性值为空还是checked），复选框都会被判定为选中状态，所以:not(:checked)无法匹配它。

如果要让这个选择器生效，需要先移除复选框的checked属性，此时该选择器就能正确选中包含未选中复选框的div。

注意事项 #

• 确保你的浏览器支持:has选择器：Chrome 105+、Firefox 121+、Safari 15.4+均已支持该选择器。
• 若需在JavaScript中使用该选择器，可通过document.querySelector()或document.querySelectorAll()调用，例如：

// 获取包含目标复选框的div
const targetDiv = document.querySelector('div.form-check:has( #id_FRA10000 )');

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