如何在无class或id的情况下用纯CSS选中特定fieldset元素

直接使用以下CSS代码即可精准选中目标fieldset并设置黑色背景：

fieldset:has(> p.submit input[type=submit][value="Edit"], 
             > p.submit input[type=submit][value="Save"], 
             > p.submit input[type=submit][value="Delete"]) {
  background-color: black;
  /* 可选：为了让文本清晰可见，可添加文字颜色设置 */
  color: white;
}

选择器逻辑说明 #

• :has() 伪类用于筛选包含指定子元素的父元素，这里用来定位包含三个特定提交按钮的目标fieldset
• > p.submit 限定仅匹配fieldset的直接子元素中class为submit的p标签
• input[type=submit][value="Edit"] 这类属性选择器精准匹配三个特定value的提交按钮，确保不会误选中其他带提交按钮的fieldset

如果需要兼容不支持:has()的旧浏览器（如IE），可以退而求其次利用结构特征定位：

fieldset > p:only-of-type + fieldset {
  background-color: black;
  color: white;
}

这个选择器的逻辑是：选中紧跟在“唯一子级p标签”后的fieldset，对应HTML中带有提示文本p的父fieldset的子fieldset。但该方式精准度略低，若页面存在其他结构类似的fieldset可能会误选，优先推荐第一种方案。

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