分享一些提高前端开发效率的CSS属性选中器!!
属性选中器非常奇异。它们可以使你挣脱棘手的题目,帮忙你以免增加类,并指出代码中的一些题目。但是不要担忧,虽然属性选中器非常复杂和强大,但是它们很容易学习和运用。在本文中,我们将计议它们是怎样运转的,并给出一些怎样运用它们的设法。
平常将 HTML
属性放在方括号中,称为属性选中器,如下:
[href] { color: red; }
这样任何拥有href
属性的且没有更特定选中器的元素的文本色彩都会是红色的
。属性选中器的特性与类雷同。
注:更多对于笼匹配的CSS特异性,你可以浏览CSS特性:你应当晓得的事情,或者要是你喜好星球大战:CSS特性战役。
但是你可以运用属性选中器做得更多。就像你的 DNA 同样,它们有内涵的逻辑来帮忙你选中各种属性组合和值。它们可以匹配属性中的任何属性,甚至字符串值,而不是像标签、类或id选中器那样精准匹配。
属性选中器
属性选中器可以独立存在,更具体地说,要是需要选中所有拥有title
属性的p标签,可以这么做:
p[title]
但你也可以通过下列操纵选中拥有 title
属性的 p 的子元素
p [title]
需要注明的是,它们之间没有空格意味着属性位于雷同的元素上(就像元素和类之间没有空格同样),而它们之间的空格意味着后代选中器,即选中拥有该属性的元素的子元素。
你可以更精细地选中具体属性值的属性。
p[title="dna"]
上面选中了所有拥有确切名称dna
的p,虽然有选中器算法可以处置每种状况(以及更多),但这里不会选中“dna is awesome”或“dnamutation”的标题。
注意:在大多数状况下,属性选中器中不需要引号,但是我运用它们,由于我信赖它可以提高清代码的可读性,并确保边界用例能够正常工作。
要是你想选中 title 包括 dna
的元素,如 “my beautiful dna” 或者 “mutating dna is fun!” ,可以运用波纹号(~)。
p[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 元素的属性,还可以运用伪类型元从来打印出文本:
What’s the first thing a biotech journalist does after finishing the first draft of an article?
.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 给我们的一个属性是“下载”,它告诉阅读器,你猜对了,下载该文件而不是试图打开它。这关于你但愿人们拜访但不但愿它们立刻打开的 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 以前,你可能需要遮盖甚至从新利用作为属性实现的样式。
Old, holey genes
p[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } p[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }
重写特定的内联样式
有时候你会碰到一些内联样式,这些样式会影响布局,但这些内联样式我们又没修改。那么下列是一种办法。
要是你道要遮盖确实切属性和值,而且但愿在它涌现的任何地方遮盖它,那么这种办法的结果最佳。
关于此示例,元素的边距以像素为单位设定,但需要在 em
中进行扩展和设定,以便在会员更改默许字体大小时可以准确地从新调整元素。
p[style*="margin: 8px"] { margin: 1em !important; }
显示文件类型
默许状况下,文件输入的可承受文件列表是不成见的。 平常,我们运用伪元从来透露它们:
[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/
更多编程相干见识,请拜访:编程课程!!
以上就是分享一些提高前端开发效率的CSS 属性选中器!!的细致内容,更多请关注 百分百源码网 其它相干文章!