如何通过CSS隐藏指定fieldset类元素，仅保留部分可见

可以通过以下几种CSS方案实现只隐藏A、B对应的fieldset，保留C的可见性：

方案一：按子元素位置定位（兼容性最好） #

利用:nth-child()伪类选中前两个fieldset元素，直接隐藏：

#variant-radios-template--17912133255436__main .product-form__input:nth-child(-n+2) {
  display: none;
}

原理：nth-child(-n+2)会匹配父容器下的第1、2个子元素，正好对应A、B的fieldset，第三个C不会被选中，保持可见。

方案二：按legend文本内容定位（适合位置可能变动的场景） #

如果A、B的文本固定，可通过:has()伪类检测子元素legend的内容来定位（需要现代浏览器支持）：

#variant-radios-template--17912133255436__main .product-form__input:has(legend:is(:contains("A"), :contains("B"))) {
  display: none;
}

原理：:has()会选中包含指定子元素的父容器，这里匹配包含文本为A或B的legend的fieldset，将其隐藏。

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