Learn about some CSS attribute selectors that improve front-end development efficiency

(Recommended tutorial: CSS Tutorial)

Attribute selectors are amazing. They can get you out of sticky situations, help you avoid adding classes, and point out problems in your code. But don't worry, although attribute selectors are very complex and powerful, they are easy to learn and use. In this article, we'll discuss how they work and give some ideas on how to use them.

Usually put HTML attributes in square brackets, called attribute selectors, as follows:

[href] {
   color: red;
}

In this way, any attribute with href and The text color of elements without a more specific selector will be red. Attribute selectors have the same properties as classes.

NOTE: For more on the CSS specificity of cage matching, you can read CSS Properties: Things You Should Know or if you like Star Wars: CSS Properties Wars.

But you can do more with attribute selectors. Like your DNA, they have internal logic to help you choose various attribute combinations and values. They can match any attribute within an attribute, even a string value, rather than an exact match like tag, class, or id selectors.

Attribute selector

The attribute selector can exist independently. More specifically, if you need to select all p tags with the title attribute, you can do this:

p[title]

But you can also select the child elements of p with the title attribute through the following operations

p [title]

It should be noted that there is no space between them means that the attribute is on the same element (like there is no space between the element and the class), and the space between them means that the descendant selector, i.e. selects the child elements of the element with that attribute.

You can more granularly select attributes with specific attribute values.

p[title="dna"]

The above selects all p's with the exact name dna, although there are selector algorithms to handle every case (and more), "dna" will not be selected here is awesome" or "dnamutation" 's title.

Note: In most cases, quotes are not required in attribute selectors, but I use them because I believe it improves code readability and ensures that edge use cases will work correctly.

If you want to select title elements containing dna, such as "my beautiful dna" or "mutating dna is fun!", you can use the tilde (~).

p[title~="dna"]

If you want to match title ending with dna, such as "dontblamemeblamemydna" or "his-stupidity-is-from-upbringing-not-dna", Just use the $ identifier:

[title$="dna"]

if you want to match title starting with dna, such as "dnamutants" or "dna- splicing-for-all", just use the ^ identifier:

[title^="dna"]

While exact matching is helpful, it may be too tight, and ^ Symbol matching may be too broad for your needs. For example, you may not want to select the title "genealogy" but still select "gene" and "gene-data". Pipe Characteristics (|) That's it, the attribute must be a complete and unique word, or separated by -.

[title|="gene"]

Finally, there is a fuzzy search attribute operator that matches any substring. String splitting is done in the attribute, as long as the word dna can be separated:

[title*="dna"]

What makes these attribute selectors even more powerful is that they are stackable, allowing you to select elements with multiple matching factors.

If you need to find a a tag that has a title and a class ending with "genes", you can use the following method:

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

Not only can you select attributes of HTML elements, you can also use pseudo-type elements to print out text:

<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;
}

The above code will display a custom string when the mouse is hovered.

The last thing to know is that you can add a flag to make attribute searches case-insensitive. Add i before the closing square bracket:

[title*="DNA" i]

so it will match dna, DNA, dnA, etc.

Now that we have seen how to make selections using attribute selectors, let's look at some use cases. I divide them into two categories: General purpose and Diagnostic.

General purpose

Settings for input type styles

You can use different styles for input types, such as email and phone.

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

Show phone link

You can hide phone numbers in specific sizes and show phone link to make calls easily on your phone.

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/

The above is the detailed content of Learn about some CSS attribute selectors that improve front-end development efficiency. For more information, please follow other related articles on the PHP Chinese website!