使用CSS属性选择器来拼接HTML的DNA的方法

CSS属性选择器非常神奇,它们可以帮你避免添加数不胜数的类名,从另一方面来指出你代码里的一些问题。但是大家不用慌,虽然属性选择器复杂且强大,但是很易于学习和使用。在这篇文章,我们将讨论它们是如何运行起来的,再教大家一些使用方面的技巧。

一般我们最普遍的使用方法是将HTML属性放进一个方括号中,称之为属性选择器。例如:

[href] {
    color: chartreuse;
}

任何具有href属性且没有更具体的选择器的html元素现在都会变成黄绿色。属性选择器的特性和类选择器一致

但是你可以使用属性选择器做更多的事情。就像你的DNA一样,它们具有嵌入式的逻辑,可帮助您选择各种属性组合和值。 它们不仅可以精确的匹配标签,类或id选择器,而且可以匹配属性中的任何属性甚至字符串值。

属性选择

属性选择器可以独立存在或更具体一点,比如我们需要选择具有title属性的所有div标签。

div[title]

也可以通过下面操作来选择具有title属性的div的子元素:

div [title]

需要明确的是,中间的空格代表着是后台选择器,即选择具有该属性的元素的子元素。我们也可以更精确一点,来选择想要的属性值:

div[title="dna"]

大多数情况下,属性选择器不需要引号,但我会使用它们,因为我相信它可以提供可读性并确保具有良好的兼容性

如果你想从经过空格分割后的列表里选择具有"dna"字符的属性值,比如“my beautiful dna”或“mutating dna is fun!”,可以在等号前添加一个波浪号`~`:

div[title~="dna"]

您可以选择“dontblamemeblamemydna”或“his-stupidity-is-from-upbringing-not-dna”之类的标题,然后使用美元符号`$`来匹配title的结尾:

[title$="dna"]

要匹配属性值的前面,例如“dnamutants”或“dna-splicing-for-all”的标题,就用插入符号`^`。

[title^="dna"]

如果你想完全匹配一个值开头的完整单词,可以使用管道符来做。比如你不想选择一个“genealogy”的title,但仍然想选择“gene”和“gene-data”:

[title|="gene"]

还有一个匹配任何子字符串的模糊搜索属性运算符`*`:

[title*="dna"]

最后要知道的是,您可以添加一个标志,让属性搜索不区分大小写。 在结束方括号之前添加`i`:

[title*="DNA" i]

使这些属性选择器更加强大的原因是它们是可堆叠的 —— 允许您选择具有多个匹配因子的元素。

比如你需要找到 a 标签,它有一个title属性,并且有一个以“genes”结尾的class类,该如何写呢?

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

我们不仅可以选择HTML元素的属性,还可以使用伪“科学”(即伪元素和内容声明)来打印出文本:

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

上面的代码在鼠标悬停时将显示一串自定义的字符串。

现在我们已经看到了如何使用属性选择器进行选择,让我们看看一些用例。我把它们分为两类: 一般使用技巧 和 诊断 。

一般使用技巧

输入类型的设置

您可以不同地设置输入类型,例如电子邮件与电话:

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

显示手机号码链接

您可以隐藏特定尺寸的电话号码并显示电话链接,以便在电话上轻松拨打电话:

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

使用CSS属性选择器来拼接HTML的DNA的方法

扫一扫手机访问