广州网站开发：使用CSS属性选择器拼接HTML的DNA

在我职业生涯的大部分时间里，属性选择器比科学更神奇。我在CSS上盯着看，用它来输出打印样式表中的链接，什么都不懂。我尽职尽责地，然后将其粘贴到我的打印样式表中，然后运行以输出任何项目是最大的燃烧垃圾堆。

但是你不必再对CSS属性选择器嗤之以鼻。到本文结束时，您将使用它们在您的站点上运行诊断程序，修复其他无法解决的问题，并生成技术经验，使其变得非常神奇。你可能认为我承诺太多而且你是对的，但是一旦你理解了属性选择器的力量，你可能会觉得夸大自己。

广州网站开发在最基本的层面上，您将HTML属性放在方括号中，并将其称为属性选择器，如下所示：

[href] {
   color: chartreuse;}

任何具有href和没有更具体的选择器的元素的文本现在将神奇地变成黄绿色。属性选择器特性与类相同。

注意：有关CSS特异性的笼匹配的更多信息，您可以阅读“ CSS特异性：您应该知道的事情 ”或者您喜欢星球大战：“ CSS特性战争 ”。

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

属性选择

属性选择器可以独立存在，也可以更具体，即如果需要选择div具有title属性的所有标记。

div[title]

但您也可以通过执行以下操作选择具有标题的div的子项：

div [title]

要清楚，它们之间没有空格意味着属性在同一个元素上（就像没有空格的元素和类），它们之间的空格意味着后代选择器，即选择具有该属性的元素的子元素。

您可以更精细地选择包含属性值的属性。

div[title="dna"]

以上选择所有具有精确标题“dna”的div。虽然有选择器算法可以处理每种情况（以及更多），但不会选择“dna很棒”或“dnamutation”的标题。我们很快就会到达那些。

注意：在大多数情况下，属性选择器中不需要引号，但我会使用它们，因为我相信它可以提高清晰度并确保边缘情况正常工作。

如果你想从空格分隔列表中选择“dna”，比如“my beautiful dna”或“变异dna很有趣！”你可以在平等的前面添加一个代字号或“波浪形”，就像我喜欢称之为标志。

div[title~="dna"]

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

[title$="dna"]

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

[title^="dna"]

虽然完全匹配是有帮助的，但它可能选择太紧，并且插入符号前端匹配可能太宽而无法满足您的需要。例如，您可能不想选择“家谱”的标题，但仍然选择“基因”和“基因数据”。管道特征（或垂直条）就是这样; 它完全匹配，但包括精确匹配后跟破折号。

[title|="gene"]

最后，有一个匹配任何子字符串的完整搜索属性运算符。

[title*="dna"]

但明智地使用它，因为上面将匹配“我喜欢我的dna-like-my-meat-rare”以及“edna”，“绑架”和“针鼹鼠”（Edna真的不应该这样做。 ）

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

但你需要找到a一个标题，标题有一个以“基因”结尾的类吗？这是如何做：

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”和任何其他变体。

唯一的缺点是，iFirefox，Chrome，Safari，Opera以及一些移动浏览器都可以使用。

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

一般用途

样式按输入类型

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

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

显示电话链接

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

span.phone {
   display: none;}a[href^="tel"] {
   display: block;}

内部与外部链接，安全与不安全

您可以区别对待内部和外部链接，并将安全链接设置为与不安全链接不同。

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非常有用。它还使得连续下载大量文件的工作流程变得更加容易。该download属性的缺点是没有默认的视觉效果将其与更传统的链接区分开来。通常这是你想要的，但如果不是，你可以做类似下面的事情。

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

覆盖特定的内联样式

有时候你会遇到内联样式，这些样式会影响作品，但它们来自你无法控制的代码。应该说如果你可以改变它们是理想的，但如果你不能，那么这是一种解决方法。

注意：如果您知道要覆盖的确切属性和值，并且希望在任何显示的位置覆盖它，那么这种方法效果最佳。

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

<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</div>div[style*="margin: 8px"] {
   margin: 1em !important;}

注意：这种方法应该非常谨慎使用，好像你需要覆盖这种风格，你将陷入 !important 战争，小猫会死。

显示文件类型

默认情况下，文件输入的可接受文件列表是不可见的。通常，我们使用伪元素来暴露它们，虽然你不能在大多数input标签上（或者在Firefox或Edge中都不能）做伪元素，但你可以在文件输入上使用它们。

<input type="file" accept="pdf,doc,docx">[accept]:after {
   content: "Acceptable file types: " attr(accept);}

HTML手风琴菜单

没有很好的宣传details和summary标签二重奏是一种只用HTML做扩展/手风琴菜单的方法。详细信息包含summary手风琴打开时要显示的标签和内容。单击摘要可展开detail标记并添加打开属性。open属性使得打开details标记的样式与封闭标记的设置不同details。

<details>
  <summary>List of Genes</summary>
    Roddenberry
    Hackman
    Wilder
    Kelly
    Luen Yang
    Simmons</details>

details[open] {
   background-color: hotpink;}

打印链接

在打印样式中显示URL使我走上了理解属性选择器的道路。你现在应该知道如何自己构建它。您只需选择所有a标签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;}

ACCESSKEYS

网络的一大优点是它提供了许多不同的访问信息选项。一个很少使用的属性是能够设置一个，accesskey以便可以通过组合键直接访问该项目和设置的字母accesskey（确切的组合键取决于浏览器）。但是，没有简单的方法可以知道网站上设置了哪些密钥。

以下代码将显示这些键:focus。我不使用，hover因为大多数时候需要的人accesskey都是那些使用鼠标有困难的人。您可以将其添加为第二个选项，但请确保它不是唯一选项。

a[accesskey]:focus:after {
   content: " AccessKey: " attr(accesskey);}

诊断

这些选项用于帮助您在构建过程中或在尝试修复问题时在本地识别问题。将这些内容放在您的生产网站上会使您的用户产生错误。

没有控件的音频

我不audio经常使用标签，但是当我使用它时，我经常忘记包含controls属性。结果：没有显示任何内容。如果您在Firefox中工作，如果您隐藏了音频元素，或者语法或其他一些问题阻止它出现（仅适用于Firefox），此代码可以帮助您解决问题。

audio:not([controls]) {
  width: 100px;
  height: 20px;
  background-color: chartreuse;
  display: block;}

没有替代文字

没有替代文字的图像是物流和可访问性的噩梦。只需查看页面就很难找到它们，但是如果你添加它们，它们就会弹出来。

注意：我使用 outline 而不是 border 因为边框可以添加到元素的宽度并弄乱布局。 outline 不添加宽度。

img:not([alt]) { /* no alt attribute */ 
  outline: 2em solid chartreuse; }img[alt=""] { /* alt attribute is blank */ 
  outline: 2em solid cadetblue; }

异步JAVASCRIPT文件

网页可以是内容管理系统和插件，框架和代码的集合，Ted（坐在三个小隔间）在度假时写道，因为该网站已关闭，他担心你的老板。确定哪些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;}

但是，凭借所有这些惊人的功能，您认为必须有一个问题。当然，属性选择器必须仅在Chrome中标记或在Safari边缘的Fiery Foxes的夜间版本中工作。这太好了，不可能成真。并且，不幸的是，有一个问题。

如果您想在最受欢迎的浏览器（即IE6）中使用属性选择器，您将无法使用。（没关系;让眼泪掉下来。没有判断。）几乎在其他任何地方你都很好。属性选择器是CSS 2.1规范的一部分，因此在十年的大部分时间里都在浏览器中使用。

所以这些选择器对你来说不再是神奇的，而是作为一种足够先进的技术而被揭示出来的。他们比科学更科学，现在你知道他们最深的秘密，这取决于你。在网上出去工作神秘的科学奇迹。

广州网站开发