interface Webtutoriel CSSQuels sont les nouveaux sélecteurs d'attributs en CSS3 ? Introduction aux sélecteurs d'attributsQuels sont les nouveaux sélecteurs d'attributs en CSS3 ? Introduction aux sélecteurs d'attributs
Ce que cet article vous apporte, c'est quels sont les nouveaux sélecteurs d'attributs en CSS3 ? Une introduction aux sélecteurs d'attributs a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile. Nous savons tous quels sont les attributs de l'élément
. Par exemple, le type et la valeur dans le code suivant sont des attributs de l'élément d'entrée. Le sélecteur d'attributs, comme son nom l'indique, est un moyen de sélectionner des éléments via des attributs.
<input type="text" value="lvye"/>
Les trois nouveaux sélecteurs d'attributs ajoutés à CSS3 font fonctionner le sélecteur comme un caractère générique, un peu comme une expression régulière.
Lorsque nous téléchargeons des informations depuis Baidu Wenku, nous voyons souvent une petite icône du type de document affichée devant le lien hypertexte dans la liste des documents. Il s'agit d'un très bon détail de conception pour l'expérience utilisateur. La technologie d'implémentation de cet effet peut être facilement réalisée en utilisant le sélecteur d'attribut dans CSS3.
Exemple :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS3 属性选择器</title>
<style type="text/css">
/*清除所有元素默认的padding和margin*/
*{padding:0;margin:0;}
/*清除列表项符号*/
ul{list-style-type:none;}
a
{
display:inline-block;
font-size:12px;
height:20px;
line-height:20px;
}
/*匹配jpg文件*/
a[href$="jpg"]:before
{
content:url("../App_images/lesson/run_css3/1.png");
}
/*匹配PDF文件*/
a[href$="pdf"]:before
{
content:url("../App_images/lesson/run_css3/2.png");
}
/*匹配PDF文件*/
a[href$="ppt"]:before
{
content:url("../App_images/lesson/run_css3/3.png");
}
</style>
</head>
<body>
<ul>
<li><a href="css3.jpg">这是jpg图片</a></li>
<li><a href="css3.pdf">这是pdf文件</a></li>
<li><a href="css3.ppt">这是ppt文档</a></li>
</ul>
</body>
</html>Analyse :
(1) En fait, le principe de mise en œuvre des effets de la liste des bibliothèques Baidu est très simple, il suffit d'utiliser le sélecteur d'attribut pour faire correspondre les derniers caractères (suffixe du fichier) de la valeur de l'attribut href dans l'élément a. En raison des différents types de fichiers, les extensions de fichiers seront également différentes. En fonction du nom du suffixe, vous pouvez ajouter différentes icônes aux liens hypertexte de différents types de fichiers. Bien sûr, le code réel de la liste des bibliothèques Baidu n'est pas comme le code ci-dessus, l'idée est la même. Les étudiants intéressés peuvent consulter le code source de la bibliothèque Baidu.
(2) L'attribut content est utilisé pour insérer du contenu dans des éléments. Nous l'expliquerons en détail dans la section "Ajout d'attributs de contenu de contenu aux éléments" dans l'interface utilisateur du tutoriel CSS3.
Ce qui précède est : quels sont les nouveaux sélecteurs d'attributs en CSS3 ? Une introduction complète à l'introduction des sélecteurs d'attributs. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.
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!
Comment nous avons tagué Google Fonts et créé des goofont.comApr 12, 2025 pm 12:02 PMGoofonts est un projet parallèle signé par un développeur-femme et un concepteur-mari, tous deux de grands fans de typographie. Nous avons marqué Google
Articles de développement Web intemporelsApr 12, 2025 am 11:44 AMPavithra Kodmad a demandé aux gens des recommandations sur ce qu'ils pensaient être certains des articles les plus intemporels sur le développement Web qui ont changé
L'accord avec l'élément de sectionApr 12, 2025 am 11:39 AMDeux articles ont publié exactement le même jour:
Pratiquez des requêtes GraphQL avec l'API de l'état de JavaScriptApr 12, 2025 am 11:33 AMApprendre à créer des API GraphQL peut être assez difficile. Mais vous pouvez apprendre à utiliser les API GraphQL en 10 minutes! Et il se trouve que je suis parfait
CMSS au niveau des composantsApr 12, 2025 am 11:09 AMLorsqu'un composant vit dans un environnement où les données interrogent les données qui vivent à proximité, il y a une ligne assez directe entre le composant visuel et le
Définissez le type sur un cercle ... avec chemin de décalageApr 12, 2025 am 11:00 AMIci, une rotation CSS légitime de Yuanchuan. Il y a ce chemin de décalage de la propriété CSS. Il était une fois, il s'appelait le chemin de mouvement, puis il a été renommé. je
What does "revert" do in CSS?Apr 12, 2025 am 10:59 AMMiriam Suzanne explique dans une vidéo de développeur de Mozilla sur le sujet.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Dreamweaver Mac
Outils de développement Web visuel
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
Adaptateur de serveur SAP NetWeaver pour Eclipse
Intégrez Eclipse au serveur d'applications SAP NetWeaver.
VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
