孩子如何只能使用 CSS 访问它的父属性？可能吗？ [复制]答案

【问题标题】：How a child can access it's parent's property only using CSS? is it possible? [duplicate]孩子如何只能使用 CSS 访问它的父属性？可能吗？ [复制]
【发布时间】：2019-10-26 13:58:43
【问题描述】：

每个span 元素如何在css 中获取其父级的title 属性？可能吗？如果我使用scss 或less 或其他什么，可以吗？

<div>
<div title="hello"><span> </span></div>
<div title="dear"><span> </span></div>
<div title="world"><span> </span></div>
</div>

所以在应用css 样式后，它的结果应该是这样的

<div>
<div title="hello"><span>hello</span></div>
<div title="dear"><span>dear</span></div>
<div title="world"><span>world</span></div>
</div>

【问题讨论】：

不太可能。但是在JS中很简单
请简单地说一下你想要什么？
我知道在 js 中是可能的，但我只需要在 css 中。所以这是不可能的。如果我使用scss 或less 可以吗？
@ibnelaiq 他可能想要像 div > span::before { content: div[title] } 这样不存在的东西
@mplungjan 是的，这就是我想要的

标签： html css sass less

【解决方案1】：

不，孩子不可能在纯 CSS 中访问它的父属性。
有一些方法可以通过 javascript 中的子级访问父级。
取而代之的是一种获取此:has.Documentation Here 的方法。
https://developer.mozilla.org/en-US/docs/Web/CSS/:has

以下选择器仅匹配直接包含 <img> 子元素的 <a> 元素：

a:has(> img)

但是没有没有方法可以通过子级访问父级。

这样你就可以像访问你的父母一样

div:has(> span){
//Do Here what you want./
}

截至 2019 年，任何浏览器仍不支持此功能。

【讨论】：