프런트엔드 개발 효율성을 향상시키는 CSS 속성 선택기를 공유해 보세요! !

속성 선택자는 놀랍습니다. 어려운 상황에서 벗어나고, 클래스 추가를 방지하고, 코드의 문제를 지적할 수 있습니다. 하지만 걱정하지 마세요. 속성 선택기는 매우 복잡하고 강력하지만 배우고 사용하기 쉽습니다. 이 글에서 우리는 그것들이 어떻게 작동하는지 논의하고 그것들을 사용하는 방법에 대한 몇 가지 아이디어를 제공할 것입니다.

일반적으로 대괄호 안에 HTML 속성을 ​​배치하는 것을 다음과 같이 속성 선택기라고 합니다. 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 元素的属性，还可以使用伪类型元素来打印出文本：

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

이렇게 하면 더 구체적인 선택기 없이 href 속성이 있는 모든 항목 텍스트 색상 해당 요소는 빨간색이 됩니다. 속성 선택자는 클래스와 동일한 속성을 갖습니다.

참고: 케이지 일치의 CSS 특수성에 대한 자세한 내용은 CSS 속성: 알아야 할 사항 또는 Star Wars: CSS 속성 전쟁을 좋아하는 경우 읽어보세요.

하지만 속성 선택기로 더 많은 일을 할 수 있습니다. DNA와 마찬가지로 그들은 다양한 속성 조합과 값을 선택하는 데 도움이 되는 내부 논리를 가지고 있습니다. 태그, 클래스 또는 ID 선택기와 같은 정확한 일치보다는 속성 내의 모든 속성, 심지어 문자열 값과도 일치할 수 있습니다.

속성 선택기

속성 선택기는 독립적으로 존재할 수 있습니다. 보다 구체적으로 title 속성이 있는 모든 p 태그를 선택해야 하는 경우 다음과 같이 할 수 있습니다.

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

하지만 다음 작업은 title 속성이 있는

p

의 하위 요소

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

를 선택합니다. 명확하게 말하면 두 요소 사이에 공백이 없으면 해당 속성이 동일한 요소에 있음을 의미합니다. 요소와 클래스 사이의 공백), 둘 사이의 공백은 하위 선택자를 의미합니다. 즉, 해당 속성을 가진 요소의 하위 요소를 선택합니다.

특정 속성값을 가진 속성을 좀 더 세부적으로 선택할 수 있습니다.

a[download]:after { 
   content: url(download-arrow.svg);
}

위에서는 정확한 이름이 dna인 모든 p를 선택하지만 모든 경우(및 그 이상)를 처리하는 선택기 알고리즘이 있지만 여기서는

"dna is awesome"또는 을 선택하지 않습니다. 제목은 "dnamutation"

입니다.

참고: 대부분의 경우 속성 선택자에는 따옴표가 필요하지 않지만 코드 가독성이 향상되고 엣지 사용 사례가 제대로 작동할 것이라고 믿기 때문에 따옴표를 사용합니다.

"나의 아름다운 DNA" 또는 "DNA 돌연변이는 재미있어요!"와 같이 dna가 포함된 🎜title🎜 요소를 선택하려면 🎜틸데(~🎜)를 사용할 수 있습니다. . 🎜

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

🎜"dontblamemeblamemydna" 또는 "his-stupidity-is-from-upbringing-not-dna"와 같이 dna로 끝나는 🎜title🎜를 일치시키려면 $를 사용하세요. 식별자: 🎜

a[download][href$="pdf"]:after {
   content: url(pdf-icon.svg);
}

🎜"dnamutants" 또는 "dna-splicing-for-all"과 같이 dna로 시작하는 🎜title🎜을 일치시키려면 를 사용하세요 ^ 식별자: 🎜

<p>Old, holey genes</p>

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

🎜정확한 일치는 도움이 되지만 선택이 너무 빡빡할 수 있으며 ^ 기호 일치는 요구 사항에 비해 너무 광범위할 수 있습니다. 예를 들어, "계보"라는 제목을 선택하지 않고 "유전자"와 "유전자 데이터"를 선택할 수 있습니다. 🎜파이프 기능(|)🎜은 바로 속성이 완전하고 🎜고유🎜 단어이거나 -로 구분되어야 한다는 것입니다. 🎜

<p>

p[style*="margin: 8px"] {
   margin: 1em !important;
}</p>

🎜마지막으로, 모든 하위 문자열과 일치하는 퍼지 검색 속성 연산자가 있습니다. dna라는 단어가 분리될 수 있는 한 속성에서 문자열 분할이 수행됩니다. 🎜

<input>

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

🎜 이러한 속성을 만듭니다. 선택기의 더욱 강력한 점은 스택형이므로 여러 일치 요소가 있는 요소를 선택할 수 있다는 것입니다. 🎜🎜제목이 있는 a 태그와 "genes"로 끝나는 클래스를 찾아야 하는 경우 다음 방법을 사용할 수 있습니다. 🎜

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

🎜당신뿐만 아니라 HTML 요소의 속성을 선택할 수 있고 의사 유형 요소를 사용하여 텍스트를 인쇄할 수도 있습니다. 🎜

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

🎜 위 코드는 마우스를 가리키면 사용자 정의 문자열을 표시합니다. 🎜🎜마지막으로 알아야 할 점은 속성 검색에서 대소문자를 구분하지 않도록 플래그를 추가할 수 있다는 것입니다. 닫는 대괄호 앞에 i를 추가하세요: 🎜

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

🎜 그러면 dna, DNA, dnA 등과 일치합니다. . 🎜🎜속성 선택기를 사용하여 선택하는 방법을 살펴봤으니 이제 몇 가지 사용 사례를 살펴보겠습니다. 저는 이를 🎜범용🎜과 🎜진단🎜이라는 두 가지 범주로 나누었습니다. 🎜🎜범용🎜🎜🎜입력 유형 스타일 설정🎜🎜🎜이메일, 전화 등 입력 유형에 대해 다양한 스타일을 사용할 수 있습니다. 🎜

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

🎜🎜전화 링크 표시🎜🎜🎜 특정 크기로 전화번호를 숨기고 전화 링크를 표시하여 휴대전화에서 쉽게 전화를 걸 수 있습니다. 🎜

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

🎜🎜내부 링크와 외부 링크, 안전한 링크와 안전하지 않은 링크🎜🎜🎜내부 및 외부 링크를 다르게 취급하고 안전한 링크를 안전하지 않은 링크와 다르게 설정할 수 있습니다. 🎜

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>Old, holey genes</p>

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

重写特定的内联样式

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

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

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

<p>

p[style*="margin: 8px"] {
   margin: 1em !important;
}</p>

显示文件类型

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

<input>

[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 중국어 웹사이트의 기타 관련 기사를 참조하세요!