如何为包含input的td或th设置内边距？纯CSS方案求助

你的需求完全可以用纯CSS实现，问题出在**:has()选择器的兼容性**，而非CSS没有父选择能力：

一、正确的:has()写法（支持现代浏览器） #

你原本的代码逻辑是对的，可以进一步明确指定是直接包含input子元素的单元格，避免匹配嵌套多层元素的情况：

#table4 th:has(> input),
#table4 td:has(> input) {
  padding: 0; /* 替换为你需要的内边距数值 */
}

注：:has()是CSS Selectors Level 4新增的伪类，支持Chrome 101+、Firefox 121+、Safari 15.4+，如果你的目标浏览器版本低于这些，该选择器会失效。

二、兼容老旧浏览器的替代方案（需配合HTML调整） #

如果必须兼容不支持:has()的浏览器，纯CSS无法直接实现“选中包含特定子元素的父元素”，此时只能通过给包含input的单元格手动添加类名的方式实现：

1. 修改HTML，给目标单元格加类：

<td class="has-input"><input type="text" name="name1"></td>

2. 用类选择器设置样式：

#table4 th.has-input,
#table4 td.has-input {
  padding: 0;
}

关于父选择器的说明 #

CSS并非缺乏父选择能力，:has()伪类已经实现了这一功能，它的作用就是选中包含指定后代元素的父元素。你之前的代码未生效，大概率是当前运行环境的浏览器版本不支持:has()。

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