属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并 ...
(推荐教程:CSS教程) 属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。 通常将 [href] { color: red; } 这样任何具有 注:更多关于笼匹配的CSS特异性,你可以阅读CSS特性:你应该知道的事情,或者如果你喜欢星球大战:CSS特性战争。 但是你可以使用属性选择器做得更多。就像你的 DNA 一样,它们有内在的逻辑来帮助你选择各种属性组合和值。它们可以匹配属性中的任何属性,甚至字符串值,而不是像标签、类或id选择器那样精确匹配。 属性选择器属性选择器可以独立存在,更具体地说,如果需要选择所有具有 p[title] 但你也可以通过以下操作选择具有 p [title] 需要说明的是,它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样),而它们之间的空格意味着后代选择器,即选择具有该属性的元素的子元素。 你可以更精细地选择具体属性值的属性。 p[title="dna"] 上面选择了所有具有确切名称 注意:在大多数情况下,属性选择器中不需要引号,但是我使用它们,因为我相信它可以提高清代码的可读性,并确保边界用例能够正常工作。 如果你想选择 title 包含 p[title~="dna"] 如果你想匹配以 [title$="dna"] 如果你想匹配以 [title^="dna"] 虽然精确匹配是有帮助的,但它可能选择太紧,并且 [title|="gene"] 最后,还有一个匹配任何子字符串的模糊搜索属性操作符,属性中做字符串拆分,只要能拆出来 [title*="dna"] 使这些属性选择器更加强大的是,它们是可堆叠的,允许你选择具有多个匹配因子的元素。 如果你需要找到一个 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; } 上面的代码在鼠标悬停时将显示一串自定义的字符串。 最后要知道的是,您可以添加一个标志,让属性搜索不区分大小写。 在结束方括号之前添加 [title*="DNA" i] 因此它会匹配 现在我们已经看到了如何使用属性选择器进行选择,让我们看看一些用例。 我将它们分为两类:一般用途和诊断。 一般用途输入类型样式的设置你可以对输入类型使用不同的样式,例如电子邮件和电话。 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 给我们的一个属性是“下载”,它告诉浏览器,你猜对了,下载该文件而不是试图打开它。这对于你希望人们访问但不希望它们立即打开的 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; } 重写特定的内联样式有时候你会遇到一些内联样式,这些样式会影响布局,但这些内联样式我们又没修改。那么以下是一种方法。 如果你道要覆盖的确切属性和值,并且希望在它出现的任何地方覆盖它,那么这种方法的效果最好。 对于此示例,元素的边距以像素为单位设置,但需要在 <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[open] { background-color: hotpink; } 打印链接在打印样式中显示URL使我走上了理解属性选择器的道路。 你现在应该知道如何自己构建它, 你只需选择带有 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 的一大优点是它提供了许多不同的信息访问选项。一个很少使用的属性是设置 下面的代码将显示这些键 a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); } 诊断这些选项用于帮助我们在构建过程中或在尝试修复问题时在本地识别问题。将这些内容放在我们的生产网站上会使用户产生错误。 没有 controls 属性的 audio我不经常使用 audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; } 没有 |