Découvrez certains sélecteurs d'attributs CSS qui améliorent l'efficacité du développement front-end

(Tutoriel recommandé : Tutoriel CSS)

Les sélecteurs d'attributs sont incroyables. Ils peuvent vous sortir de situations délicates, vous aider à éviter d’ajouter des classes et signaler des problèmes dans votre code. Mais ne vous inquiétez pas, même si les sélecteurs d'attributs sont très complexes et puissants, ils sont faciles à apprendre et à utiliser. Dans cet article, nous discuterons de leur fonctionnement et donnerons quelques idées sur la façon de les utiliser.

Habituellement l'attribut HTML est placé entre crochets, appelé sélecteur d'attribut, comme suit :

[href] {
   color: red;
}

De cette façon tout élément avec l'attribut href et plus de sélecteur spécifique Le texte la couleur sera 红色的. Les sélecteurs d'attributs ont les mêmes propriétés que les classes.

REMARQUE  : Pour en savoir plus sur la spécificité CSS de la correspondance de cages, vous pouvez lire CSS Properties : Things You Should Know, ou si vous aimez Star Wars : CSS Properties Wars.

Mais vous pouvez faire plus avec les sélecteurs d'attributs. Comme votre ADN, ils ont une logique interne pour vous aider à choisir diverses combinaisons d'attributs et valeurs. Ils peuvent correspondre à n'importe quel attribut au sein d'un attribut, même à une valeur de chaîne, plutôt qu'à une correspondance exacte comme les sélecteurs de balise, de classe ou d'identifiant.

Sélecteur d'attribut

Le sélecteur d'attribut peut exister indépendamment. Plus précisément, si vous devez sélectionner toutes les balises p avec l'attribut title, vous pouvez faire ceci :

p[title]

Mais vous pouvez aussi sélectionner les éléments enfants de

ptitle avec l'attribut

p [title]

A noter qu'il n'y a pas d'espace entre eux signifie que l'attribut est sur le même élément (Comme s'il n'y avait pas d'espace entre l'élément et la classe), tandis que l'espace entre eux signifie un sélecteur descendant, c'est-à-dire sélectionne les éléments enfants de l'élément avec cet attribut.

Vous pouvez sélectionner de manière plus précise des attributs avec des valeurs d'attribut spécifiques.

p[title="dna"]

Ce qui précède sélectionne tous les p portant le nom exact

, et bien qu'il existe des algorithmes de sélection pour gérer tous les cas (et plus), dna"l'ADN est génial" ou titre de "dnamutation" .

Remarque : dans la plupart des cas, les guillemets ne sont pas requis dans les sélecteurs d'attributs, mais je les utilise car je pense que cela améliore la lisibilité du code et garantit que les cas d'utilisation Edge fonctionneront correctement.

Si vous souhaitez sélectionner

titre des éléments contenant , tels que "mon bel ADN" ou "muter l'ADN, c'est amusant !", vous pouvez utiliser le dnatilde (~ ).

p[title~="dna"]

Si vous souhaitez faire correspondre

titredna se terminant par , comme "dontblamemeblamemydna" ou "sa-stupidité-vient-de-l'éducation-pas-dna", utilisez simplement Identifiant : $

[title$="dna"]

Si vous souhaitez faire correspondre

titredna commençant par , tel que "dnamutants" ou "dna-splicing-for-all", utilisez simplement Identifiants : ^

[title^="dna"]

Bien que la correspondance exacte soit utile, la sélection peut être trop serrée et la correspondance des signes

peut être trop large pour vos besoins. Par exemple, vous ne souhaiterez peut-être pas sélectionner le titre « généalogie », mais sélectionner néanmoins « gène » et « données génétiques ». La ^Fonctionnalité Pipeline (|) n'est que cela, l'attribut doit être un mot complet et unique, ou séparé par . -

[title|="gene"]

Enfin, il existe un opérateur d'attribut de recherche floue qui correspond à n'importe quelle sous-chaîne. Le fractionnement des chaînes est effectué dans l'attribut, à condition que le mot

puisse être séparé : dna

[title*="dna"]

Qu'est-ce qui fait Ces sélecteurs d'attributs sont encore plus puissants car ils sont empilables, vous permettant de sélectionner des éléments avec plusieurs facteurs de correspondance.

Si vous avez besoin de trouver une balise

qui a un a et une classe se terminant par "gènes", vous pouvez utiliser la méthode suivante : title

a[title][class$="genes"]

Vous pouvez non seulement choisir Attributs des éléments HTML, vous pouvez également utiliser des éléments de pseudo-type pour imprimer du texte :

<span class="joke" title="Gene Editing!">
What’s the first thing a biotech journalist does after finishing the first draft of an article?
</span>

.joke:hover:after {
   content: "Answer:" attr(title);
   display: block;
}

Le code ci-dessus affichera une chaîne personnalisée lorsque la souris sera survolée.

La dernière chose à savoir est que vous pouvez ajouter un indicateur pour rendre les recherches d'attributs insensibles à la casse. Ajoutez

avant le crochet fermant : i

[title*="DNA" i]

pour qu'il corresponde à

, dna, DNA etc. dnA

Maintenant que nous avons vu comment effectuer des sélections à l'aide de sélecteurs d'attributs, examinons quelques cas d'utilisation. Je les ai divisés en deux catégories :

Usage général et Diagnostics.

Utilisation générale

Paramètres des styles de type de saisie

Vous pouvez utiliser différents styles pour les types de saisie tels que l'e-mail et le téléphone.

input[type="email"] {
   color: papayawhip;
}
input[type="tel"] {
   color: thistle;
}

Afficher le lien téléphonique

Vous pouvez masquer le numéro de téléphone dans une taille spécifique et afficher le lien téléphonique pour passer facilement des appels sur un téléphone mobile.

span.phone {
   display: none;
}
a[href^="tel"] {
   display: block;
}

内部链接 vs 外部链接，安全链接 vs 非安全链接

你可以区别对待内部和外部链接，并将安全链接设置为与不安全链接不同：

a[href^="http"]{
   color: bisque;
}
a:not([href^="http"]) {
  color: darksalmon;
}

a[href^="http://"]:after {
   content: url(unlock-icon.svg);
}
a[href^="https://"]:after {
   content: url(lock-icon.svg);
}

下载图标

HTML5 给我们的一个属性是“下载”，它告诉浏览器，你猜对了，下载该文件而不是试图打开它。这对于你希望人们访问但不希望它们立即打开的 PDF 和 DOC 非常有用。它还使得连续下载大量文件的工作流程更加容易。下载属性的缺点是没有默认的视觉效果将其与更传统的链接区分开来。通常这是你想要的，但如果不是，你可以做类似下面的事情：

a[download]:after { 
   content: url(download-arrow.svg);
}

还可以使用不同的图标（如PDF与DOCX与ODF等）来表示文件类型，等等。

a[href$="pdf"]:after {
   content: url(pdf-icon.svg);
}
a[href$="docx"]:after {
   content: url(docx-icon.svg);
}
a[href$="odf"]:after {
   content: url(open-office-icon.svg);
}

你还可以通过叠加属性选择器来确保这些图标只出现在可下载链接上。

a[download][href$="pdf"]:after {
   content: url(pdf-icon.svg);
}

覆盖或重新使用已废弃/弃用的代码

我们都遇到过时代码过时的旧网站，在 HTML5 之前，你可能需要覆盖甚至重新应用作为属性实现的样式。

<p bgcolor="#000000" color="#FFFFFF">Old, holey genes</p>

p[bgcolor="#000000"] { /*override*/
   background-color: #222222 !important;
}
p[color="#FFFFFF"] { /*reapply*/
   color: #FFFFFF;
}

重写特定的内联样式

有时候你会遇到一些内联样式，这些样式会影响布局，但这些内联样式我们又没修改。那么以下是一种方法。

如果你道要覆盖的确切属性和值，并且希望在它出现的任何地方覆盖它，那么这种方法的效果最好。

对于此示例，元素的边距以像素为单位设置，但需要在 em 中进行扩展和设置，以便在用户更改默认字体大小时可以正确地重新调整元素。

<p style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</p>

p[style*="margin: 8px"] {
   margin: 1em !important;
}

显示文件类型

默认情况下，文件输入的可接受文件列表是不可见的。 通常，我们使用伪元素来暴露它们：

<input type="file" accept="pdf,doc,docx">

[accept]:after {
   content: "Acceptable file types: " attr(accept);
}

html 手风琴菜单

details和summary标签是一种只用HTML做扩展/手风琴菜单的方法，details 包括了summary标签和手风琴打开时要展示的内容。点击summary会展开details标签并添加open属性，我们可以通过open属性轻松地为打开的details标签设置样式：

details[open] {
   background-color: hotpink;
}

打印链接

在打印样式中显示URL使我走上了理解属性选择器的道路。 你现在应该知道如何自己构建它， 你只需选择带有href的所有标签，添加伪元素，然后使用attr()和content打印它们。

a[href]:after {
   content: " (" attr(href) ") ";
}

自定义提示

使用属性选择器创建自定义工具提示既有趣又简单：

[title] {
  position: relative;
  display: block;
}
[title]:hover:after {
  content: attr(title);
  color: hotpink;
  background-color: slateblue;
  display: block;
  padding: .225em .35em;
  position: absolute;
  right: -5px;
  bottom: -5px;
}

便捷键

web 的一大优点是它提供了许多不同的信息访问选项。一个很少使用的属性是设置accesskey的能力，这样就可以通过键组合和accesskey设置的字母直接访问该项目(确切的键组合取决于浏览器)。但是要想知道网站上设置了哪些键并不是件容易的事

下面的代码将显示这些键:focus。我不使用鼠标悬停，因为大多数时候需要accesskey的人是那些使用鼠标有困难的人。你可以将其添加为第二个选项，但要确保它不是惟一的选项。

a[accesskey]:focus:after {
   content: " AccessKey: " attr(accesskey);
}

诊断

这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题。将这些内容放在我们的生产网站上会使用户产生错误。

没有 controls 属性的 audio

我不经常使用audio标签，但是当我使用它时，我经常忘记包含controls属性。 结果：没有显示任何内容。 如果你在 Firefox，如果隐藏了音频元素，或者语法或其他一些问题阻止它出现（仅适用于Firefox），此代码可以帮助你解决问题：

audio:not([controls]) {
  width: 100px;
  height: 20px;
  background-color: chartreuse;
  display: block;
}

没有 alt 文本

没有 alt 文本的图像是可访问性的噩梦。只需查看页面就很难找到它们，但如果添加它们，它们就会弹出来（当页面图片加载失败时，alt文字可以更好的解释图片的作用）：

img:not([alt]) { /* no alt attribute */ 
  outline: 2em solid chartreuse; 
}
img[alt=""] { /* alt attribute is blank */ 
  outline: 2em solid cadetblue; 
}

异步 Javascript 文件

网页可以是内容管理系统和插件，框架和代码的集合，确定哪些JavaScript异步加载以及哪些不加载可以帮助你专注于提高页面性能。

script[src]:not([async]) {
  display: block;
  width: 100%;
  height: 1em;
  background-color: red;
}
script:after {
  content: attr(src);
}

JavaScript 事件元素

你可以突出显示具有JavaScript事件属性的元素，以便将它们重构到JavaScript文件中。这里我主要关注OnMouseOver属性，但是它适用于任何JavaScript事件属性。

[OnMouseOver] {
   color: burlywood;
}
[OnMouseOver]:after {
   content: "JS: " attr(OnMouseOver);
}

隐藏项

如果需要查看隐藏元素或隐藏输入的位置，可以使用它们来显示

[hidden], [type="hidden"] {
  display: block;
}

原文地址：https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/

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!