フロントエンドの開発効率を向上させるいくつかの CSS 属性セレクターについて学びます

(推奨チュートリアル: CSS チュートリアル )

属性セレクターは素晴らしいです。厄介な状況から抜け出し、クラスの追加を回避し、コードの問題を指摘するのに役立ちます。ただし、心配する必要はありません。属性セレクターは非常に複雑で強力ですが、学習と使用は簡単です。この記事では、それらがどのように機能するかについて説明し、それらを使用する方法についていくつかのアイデアを示します。

通常、HTML 属性は、次のように属性セレクターと呼ばれる角括弧で囲みます。

[href] {
   color: red;
}

このように、href とより具体的なセレクターのない要素のテキストの色は red になります。属性セレクターにはクラスと同じプロパティがあります。

注 : ケージ マッチングの CSS の特異性の詳細については、「CSS プロパティ: 知っておくべきこと」を読むか、スター ウォーズが好きなら「CSS プロパティ ウォーズ」を参照してください。

しかし、属性セレクターを使用すると、さらに多くのことができます。 DNA と同様に、さまざまな属性の組み合わせと値を選択するのに役立つ内部ロジックがあります。タグ、クラス、ID セレクターのような完全一致ではなく、属性内の任意の属性 (文字列値であっても) と一致することができます。

属性セレクター

属性セレクターは独立して存在できます。より具体的には、title 属性を持つすべての p タグを選択する必要がある場合は、これを行うことができます:

p[title]

ただし、次の操作で title 属性を使用して p の子要素を選択することもできます。

p [title]

それらの間のスペースは、属性が同じ要素上にあることを意味し (要素とクラスの間にスペースがないのと同様)、それらの間のスペースは子孫セレクター、つまりその属性を持つ要素の子要素を選択することを意味します。

特定の属性値を持つ属性をより詳細に選択できます。

p[title="dna"]

上記は、正確な名前 dna を持つすべての p を選択します。ただし、あらゆるケース (およびそれ以上) を処理するセレクター アルゴリズムがありますが、ここでは "dna" は選択されません。 awesome" または "dnamutation" のタイトル。

注: ほとんどの場合、属性セレクターでは引用符は必要ありませんが、引用符を使用するとコードの可読性が向上し、エッジ ユース ケースが正しく動作することが保証されると考えているためです。

「私の美しい DNA」や「変異する DNA は楽しい!」など、dna を含む title 要素を選択したい場合は、## を使用できます。 # チルダ (~)。

p[title~="dna"]

「dontblamemeblamemydna」や「his-stupidity-is-from-upbringing-not-dna」など、

dna で終わる title と一致する場合, 「dnamutants」や「dna」など、dna で始まる title

と一致させたい場合は、

$ 識別子:

[title$="dna"]

を使用します。 - splicing-for-all」の場合は、# 識別子を使用してください:

[title^="dna"]

正確な一致は便利ですが、厳密すぎる可能性があり、

^ シンボルの一致が発生する可能性があります。ニーズに対して範囲が広すぎます。たとえば、タイトル「系譜」を選択せず​​に、「遺伝子」と「遺伝子データ」を選択したい場合があります。 パイプの特性 (|) 以上です。属性は完全で 一意の 単語であるか、- で区切られている必要があります。

[title|="gene"]

最後に、任意の部分文字列に一致するあいまい検索属性演算子があります。単語

dna が分離できる限り、文字列の分割は属性内で行われます:

[title*="dna"]

これらの属性セレクターがさらに強力なのは、スタック可能であるため、複数の一致要素を持つ要素を選択できることです。

title と「genes」で終わるクラスを持つ 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;
}

上記のコードは、マウスをホバーするとカスタム文字列を表示します。

最後に知っておくべきことは、属性検索で大文字と小文字を区別しないようにフラグを追加できることです。

dna、DNA

、

dnA などと一致するように、右角括弧の前に i を追加します:

[title*="DNA" i]

。

属性セレクターを使用して選択を行う方法を説明したので、いくつかの使用例を見てみましょう。私はそれらを

汎用 と 診断 の 2 つのカテゴリに分類します。

汎用

入力タイプのスタイルの設定

電子メールや電話など、入力タイプにさまざまなスタイルを使用できます。

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

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

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

重写特定的内联样式

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

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

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

<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和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 属性セレクターについて学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。