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 caractéristiques 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.
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]
ptitle avec l'attribut
p [title]
p[title="dna"]
, 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" .
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"]
titredna se terminant par , comme "dontblamemeblamemydna" ou "sa-stupidité-vient-de-l'éducation-pas-dna", utilisez simplement Identifiant : $
[title$="dna"]
titredna commençant par , tel que "dnamutants" ou "dna-splicing-for-all", utilisez simplement Identifiants : ^
[title^="dna"]
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"]
puisse être séparé : dna
[title*="dna"]
qui a un a et une classe se terminant par "gènes", vous pouvez utiliser la méthode suivante : title
a[title][class$="genes"]
<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;
} avant le crochet fermant : i
[title*="DNA" i]
, dna, DNA etc. dnA
Usage général et Diagnostics.
Utilisation généraleinput[type="email"] {
color: papayawhip;
}
input[type="tel"] {
color: thistle;
}span.phone {
display: none;
}
a[href^="tel"] {
display: block;
}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);
}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);
}这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题。将这些内容放在我们的生产网站上会使用户产生错误。
我不经常使用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异步加载以及哪些不加载可以帮助你专注于提高页面性能。
script[src]:not([async]) {
display: block;
width: 100%;
height: 1em;
background-color: red;
}
script:after {
content: attr(src);
}你可以突出显示具有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/
Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
