CSS 伪元素：使用 attr 来引用另一个元素的属性答案

【问题标题】：CSS pseudo-elements: using attr to refer to an attribute of another elementCSS 伪元素：使用 attr 来引用另一个元素的属性
【发布时间】：2018-10-18 09:56:39
【问题描述】：

我想使用 ::before 伪元素插入一些在 HTML 文件的另一个区域中找到的文本。

我的 HTML：

<html>
    <body notetext="Note">
     ...
    <p class="bodytext">Don't press the red button!</p>
    </body>

我可以使用 content:attr 来选择当前元素的属性，但是可以引用祖先元素的属性吗？就像在 XPath 中一样，例如 (//body/@notetext)

我拥有的非工作 CSS：

p.bodytext::before {
    content:attr(notetext);
}

我正在使用 Antennahouse Formatter，用于 CSS 分页媒体。

【问题讨论】：

我不明白这怎么可能只使用 CSS，你不能选择一个元素然后选择另一个元素来获取它的属性值
你能改变 HTML
Css 用于样式，如果您想进行 dom 操作，请使用 js
我可以更改 HTML，但希望我不必这样做。

标签： css pseudo-element antenna-house

【解决方案1】：

AH Formatter 有一个-ah-attr-from() 扩展功能（参见https://www.antennahouse.com/product/ahf65/ahf-ext.html#attr-from）。

函数原型与attr() 相同，但添加了一个指定祖先元素的参数：

-ah-attr-from( <from-name> , <attr-name> <type-or-unit>? [ , <fallback> ]? )

【讨论】：

【解决方案2】：

仅使用 css 无法引用其他元素的内容。也不能引用父元素。我建议您使用 javascript 和数据属性来解决您的问题。

Temani Afif 的回答很棒，只要您不需要支持 Internet Explorer，我就会推荐它。否则你需要一个 css 自定义属性 IE polyfill。

【讨论】：

【解决方案3】：

如果您可以更改 HTML，您可以考虑使用 CSS 变量，如下所示：

p.bodytext::before {
  content: var(--text);
}

<body style="--text:'Note '">

  <p class="bodytext">Don't press the red button!</p>
</body>

【讨论】：

我确定他正在尝试将某个元素的属性绑定到另一个元素的内容，而不是样式。
@ZohirSalakCeNa 这就是我使用另一种替代方法的原因
不，我的意思是像在 WPF 中一样，绑定一个不断变化的控件属性，可能会显示在某个地方。
有趣的方法。不幸的是，我的处理器（Antennahouse Formatter，用于 CSS Paged Media）不允许使用变量。