CSS 伪元素:使用 attr 来引用另一个元素的属性
Posted
技术标签:
【中文标题】CSS 伪元素:使用 attr 来引用另一个元素的属性【英文标题】:CSS pseudo-elements: using attr to refer to an attribute of another element 【发布时间】: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,但希望我不必这样做。 【参考方案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)不允许使用变量。以上是关于CSS 伪元素:使用 attr 来引用另一个元素的属性的主要内容,如果未能解决你的问题,请参考以下文章