CSS псевдоэлементы: использование attr для ссылки на атрибут другого элемента - PullRequest
Новая
       18

CSS псевдоэлементы: использование attr для ссылки на атрибут другого элемента

0 голосов
/ 08 мая 2018

Я бы хотел использовать псевдоэлемент :: 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 Paged Media.

Ответы [ 3 ]

0 голосов
/ 08 мая 2018

Только с css невозможно ссылаться на содержимое других элементов. Также невозможно сослаться на родительский элемент. Я бы посоветовал вам использовать javascript и атрибуты данных для решения вашей проблемы.

Ответ Темани Афифа отличный, я бы порекомендовал его, если вам не нужна поддержка Internet Explorer. В противном случае вам понадобится css пользовательские свойства IE polyfill.

0 голосов
/ 08 мая 2018

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> ]? )
0 голосов
/ 08 мая 2018

Если вы можете изменить HTML, вы можете рассмотреть возможность использования переменных CSS, таких как: 

p.bodytext::before {
  content: var(--text);
}
<body style="--text:'Note '">

  <p class="bodytext">Don't press the red button!</p>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...