Quelles sont les utilisations des attributs content et attr en CSS3

L'attribut content en CSS3 peut remplir le contenu des éléments de page via CSS, et peut également implémenter des opérations de connexion de chaîne ; content et attr peuvent être utilisés ensemble pour obtenir dynamiquement le contenu des éléments

[Cours recommandés : Tutoriel CSS3]

L'émergence de CSS3 a modifié la fonctionnalité de feuilles de style. Cela devient de plus en plus puissant et rend également le développement plus facile et plus pratique. Surtout les nouvelles fonctionnalités apparues dans CSS3, telles que les transitions, les animations et les transformations, etc. Il y a une fonctionnalité ici qui n'est pas si accrocheuse, mais elle est très utile, ce sont les expressions de contenu et d'attr, qui peuvent tranquillement. sous la page. Utilisez CSS pour générer du contenu. Voyons comment attr et content fonctionnent ensemble pour produire des effets magiques.

Utilisation de base du contenu

L'attribut content permet aux programmeurs d'utiliser CSS pour remplir du contenu dans les éléments de la page

Exemple :

.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }

Veuillez noter que si vous souhaitez que le pseudo élément : after soit positionné de manière absolue, vous devez définir la position : relative

content et attr sont utilisés ensemble

Si vous ne voulez pas mettre le contenu S'il est écrit en CSS, vous pouvez utiliser des expressions attr pour obtenir dynamiquement le contenu des éléments de la page :

/* <div data-line="1"></div> */ 
div[data-line]:after { 
 content: attr(data-line); 
/* 属性名称上不要加引号！ */ }

L'attribut attr est généralement utilisé en conjonction avec l'attribut personnalisé data- , car bien que d'autres attributs traditionnels soient également capables de stocker de la valeur, ils ne conviennent généralement pas au stockage de texte expressif.

Opération de concaténation de chaînes dans le contenu

Ce type de concaténation de chaînes est très similaire aux langages de programmation conventionnels :

/* <div data-line="1"></div> */ 
div[data-line]:after
 { content: "[line " attr(data-line) "]"; }

Elle peut être effectuée dans CSS3 Il est également très utile de compléter la concaténation de chaînes en JavaScript et de générer dynamiquement le contenu d'une page avec attr. Nous pouvons l'utiliser avec du contenu pour opérer sur de nombreux autres éléments et attributs de la page.

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!