CSS技术问题：父元素含::before伪元素时如何设置子元素样式

嘿，针对你的需求，我整理了两种可行的CSS方案，你可以根据项目的浏览器兼容需求来选择：

1. 现代浏览器推荐：使用:has()伪类 #

CSS的:has()伪类可以直接帮我们匹配包含指定伪元素/子元素的父元素，完美契合你的场景。你可以这样编写代码：

table.table-custom tbody td.dt-checkbox:has(::before) a.myCheckboxLink {
  /* 在这里写入你的特定样式 */
  color: #e74c3c; /* 示例：将文字改为红色 */
  font-weight: 600;
}

简单解释：这个选择器会先找到所有包含::before伪元素的.dt-checkbox单元格，再选中它内部的.myCheckboxLink链接，从而给目标元素应用你需要的特殊样式。

2. 兼容性优先：针对父元素的触发状态写选择器 #

如果你的项目需要兼容不支持:has()的旧版浏览器（比如Firefox 120及以下版本），可以换个思路：通常父元素的::before伪元素是通过某个类或状态（比如checked、active）触发显示的，你直接针对这个状态编写选择器即可。

举个例子，假设父元素.dt-checkbox是因为添加了is-checked类才显示::before伪元素的，代码可以写成：

table.table-custom tbody td.dt-checkbox.is-checked a.myCheckboxLink {
  /* 你的特定样式 */
}

这种方式兼容性拉满，只要对应上父元素触发伪元素的条件就能生效。

补充小提示：如果父元素的::before是默认存在的（不是通过类/状态触发），那第一种:has()的方案就完全适用啦。

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