如何用CSS3选择父元素首个子元素含指定属性的::after伪元素？

首先明确：这个需求可以实现，但你之前的写法存在逻辑错误，原因和可行方案如下：

为什么你的选择器不生效？ #

伪元素（比如::after）是依附于父元素（.js-dropdown）的虚拟元素，并不存在于实际DOM树中，不属于任何兄弟元素的范畴。你用的+（相邻兄弟选择器）和~（通用兄弟选择器）只能匹配DOM中真实存在的兄弟节点，无法关联真实元素和父元素的伪元素，所以这两种写法根本无法命中目标。

可行的实现方案 #

有两种可靠的实现方式：

方案1：利用CSS :has() 选择器（推荐，现代浏览器支持） #

:has() 是CSS的父选择器，它可以让父元素根据子元素的状态来匹配自身，进而控制自身的伪元素。写法如下：

.js-dropdown:has(> [x-placement^="bottom"])::after {
    background: red;
}

• 解释：> [x-placement^="bottom"] 匹配父元素下直接子元素中属性x-placement以bottom开头的元素（也就是你的<ul>），:has() 让.js-dropdown只有在包含这样的子元素时才被选中，最后再选中它的::after伪元素。
• 兼容性：目前Chrome、Edge、Safari，以及Firefox 121+版本都支持has()，如果你的项目不需要兼容旧版浏览器，这是最简洁的方案。

方案2：通过JS给父元素添加状态类（兼容所有浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以通过JavaScript监听x-placement属性的变化，给父元素.js-dropdown添加对应的类名，比如dropdown-bottom-placed，然后用类选择器控制伪元素：

// 监听x-placement变化（示例代码，根据实际场景调整）
const dropdownMenus = document.querySelectorAll('.js-dropdown-menu');
dropdownMenus.forEach(menu => {
    const parentDropdown = menu.closest('.js-dropdown');
    if (menu.getAttribute('x-placement').startsWith('bottom')) {
        parentDropdown.classList.add('dropdown-bottom-placed');
    } else {
        parentDropdown.classList.remove('dropdown-bottom-placed');
    }
});

对应的CSS：

.js-dropdown.dropdown-bottom-placed::after {
    background: red;
}

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