值得收藏的一些 CSS 属性选择器!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。

通常将 HTML 属性放在方括号中,称为属性选择器,如下:

[href] {
   color: red;
}

这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。

:更多关于笼匹配的CSS特异性,你可以阅读CSS特性:你应该知道的事情,或者如果你喜欢星球大战:CSS特性战争

但是你可以使用属性选择器做得更多。就像你的 DNA 一样,它们有内在的逻辑来帮助你选择各种属性组合和值。它们可以匹配属性中的任何属性,甚至字符串值,而不是像标签、类或id选择器那样精确匹配。

属性选择器

属性选择器可以独立存在,更具体地说,如果需要选择所有具有title属性的div标签,可以这么做:

div[title]

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

div [title]

需要说明的是,它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样),而它们之间的空格意味着后代选择器,即选择具有该属性的元素的子元素。

你可以更精细地选择具体属性值的属性。

div[title="dna"]

上面选择了所有具有确切名称dna的div,虽然有选择器算法可以处理每种情况(以及更多),但这里不会选择“dna is awesome”“dnamutation”的标题。

注意:在大多数情况下,属性选择器中不需要引号,但是我使用它们,因为我相信它可以提高清代码的可读性,并确保边界用例能够正常工作。

如果你想选择 title 包含 dna的元素,如 “my beautiful dna” 或者 “mutating dna is fun!” ,可以使用波浪号(~)。

div[title~="dna"]

如果你想匹配以 dna 结尾的 title,如  “dontblamemeblamemydna” 或 “his-stupidity-is-from-upbringing-not-dna” ,刚可以使用$标志符:

[title$="dna"]

如果你想匹配以 dna 开头的 title,如  “dnamutants” 或 “dna-splicing-for-all” ,刚可以使用^标志符:

[title^="dna"]

虽然精确匹配是有帮助的,但它可能选择太紧,并且^符号匹配可能太宽而无法满足你的需要。 例如,可能不想选择 “genealogy” 的标题,但仍然选择“gene”和“gene-data”。 管道特征(|)就是这样,属性中必须是完整且唯一的单词,或者以-分隔开。

[title|="gene"]

最后,还有一个匹配任何子字符串的模糊搜索属性操作符,属性中做字符串拆分,只要能拆出来dna这个词就行:

[title*="dna"]

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

如果你需要找到一个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;
}

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

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

[title*="DNA" i]

因此它会匹配dna, DNA, dnA等。

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

一般用途

输入类型样式的设置

你可以对输入类型使用不同的样式,例如电子邮件和电话。

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

下载图标

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

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 之前,你可能需要覆盖甚至重新应用作为属性实现的样式。

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

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

重写特定的内联样式

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

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

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

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

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

显示文件类型

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

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

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

html 手风琴菜单

detailssummary标签是一种只用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://segmentfault.com/a/1190000021399170

作者:John
译者:前端小智
来源:https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/
Image placeholder
前端答疑
未设置
  67人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css属性选择器有哪些?

css属性选择器有哪些?[attribute]用于选取带有指定属性的元素。该选择器选择包含attribute属性的所有元素,不论attribute的值为何。[attribute=value]用于选取带

属性选择器

a[href]{};匹配带有href属性的a标签。a[href="http://www.baidu.com"]{};匹配herf等于百度的a标签。a[href~="aa"]{};匹配href属性包含a

一份完整的阿里云 Redis 开发规范,值得收藏!

来源:yq.aliyun.com/articles/531067作者:付磊-起扬 本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明。键值设计命令使用客户端使用相关工具通过本文的介绍

jQuery如何按name属性选择元素?

方法1:使用name属性选择器name属性选择器可用于按name属性选择元素。此选择器选择值与指定值完全相等的元素。语法:[name=“nameOfElement”]示例:输出:方法2:使用javas

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

css3选择器是啥意思

css3选择器是啥意思要明白css3选择器,我们首先需要知道什么是css选择器。css选择器是什么(推荐学习:CSS视频教程)●css选择器是用来规定css样式用于哪一个或哪一些dom元素的一种规范。

选择器和介绍CSS布局笔记

css选择器: 1.元素选择器,例如:p{}; 2.类选择器,例如:.box{}; 3.ID选择器,例如:#box{};

CSS选择器进阶笔记

后代选择器 ulli{};ul下的所有li后代 div>a{};div下一级子元素a,直接关系。p+span{};兄弟,同级第一个元素。p~span{};p所有的同级span。

CSS选择器进阶笔记

伪类选择器,冒号定义。通过元素的状态操作元素的样式。动态 :link超链接未被访问前的样式:visted超链接被访问前的样式 :hover鼠标悬停在元素的样式:active鼠标按下在元素的样式 lvh

CSS选择器进阶笔记

div:not(.d1){};div标签中除了class等于d1的是所有元素。li:first-child;父元素的第一个子元素,被选择元素为第一个子元素。第一个子元素为li的元素。 li:last-

jQuery选择器的的优点是什么

jQuery选择器的的优点1、简洁的写法,说道简洁的写法,给大家列举一下例子,看看jQ和原生哪个更方便。。2、提供了完善的处理机制(完善的兼容处理)3、jQuery选择器判断dom节点存在的方法:4、

jquery基本过滤选择器有哪些?

jquery基本过滤选择器:1、first()或者:first选取第一个元素//选择第一个div元素 $('div:first') $('div').first()2、last()或者:last选取最

jquery表单选择器有哪些?

jquery表单选择器有哪些?jquery虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所以,jQuery为表单提供了专用的选择器。:input:选取所有inp

jquery有几种选择器?

jquery有几种选择器?很多种,大概归纳为9种。1、基本的有id、标签、类、通配符选择器:#id element .class *2、层次选择器:ancestordescendant parent>

jquery中有哪几种类型的选择器?

jQuery选择器一、基本选择器基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。1、ID选择器#id描述:根据给定的id匹配一个元素,返回单

jquery内容过滤选择器有哪些?

:contains(text):empty:has(seletor):parent先写几个DOM元素的HTML结构:JohnResign GeorgeMartin MalcomJohnSinclair

jquery可见性过滤选择器有哪些?

jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:过滤器名jQuery语法说明返回:hidden$(':hidden')选取所有不可见元素集合元素:visible$

分享个人珍藏的 Git 使用技巧

Besidesthe"basic"commandsofGit,everyonehastheirownlittleGittrickstheyuse.Iwantedtoquicklywrit

【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

js如何修改css属性?

js如何修改css属性?1、修改style样式:通过document.styleSheets[n]//n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到

css如何清除a标签的block属性

css如何清除a标签的block属性a标签默认是inline行内元素,不支持设置宽高等属性。为了让a标签支持宽高属性,我们可以设置a{display:block}将它变成块级元素同样的,清除a标签的b

css属性是什么?

层叠样式表是一个完全的纯文本文件,通常以“css”为扩展名作为单独的文件来使用,它的内容包含了一组告诉浏览器,如何安排与显示特定的html标签中内容的规则。CSS定义规则由三个部分构成:选择符,属性和