击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天和大家聊一下，CSS中属性选择器都有哪些，大家可以借此加深对选择器的印象。

关于属性选择器，大概有下面这七种。我们逐个来看一下。

E[attr]

匹配有属性attr的元素。

比如：a[href]{}

E[attr=val]

attr属性值等于val。

比如：span[class="error"]{}

E[attr ~= val]

attr属性值有多个空格分开的值，其中有一个值等于val。

比如：a[title~='db']{}

E[attr^=val]

attr属性值以val开头

比如：a[class^="icon-"]{}

E[attr$=val]

attr属性值以val结尾

比如：a[href$=".html"]{}

E[attr*=val]

attr属性值含有val

比如：a[href*="?"]{}

E[attr|=val]

attr属性值由一系列用连字符连拉而且必须是以val开头。

比如：

<p lang="en-gb"></p>

p[lang|="en"]{}

CSS选择器（Selector）是用于实现网页页面定义的基础，选择器的主要作用在于确定指定的单个元素或者一类元素。在获取元素之后即可以对所获取的元素进行样式的定义。最终为用户呈现不同交互视觉风格的前端页面。本文主要对常用CSS选择器基本概念与常用属性选择器进行说明与实例展示。

CSS Selector类型划分

按照W3C技术规范划分目前CSS Selector主要类型可以划分为基本选择器、关系选择器、伪选择器三种类型不同的选择器。目前主要CSS选择器类型及分类描述如下图所示：

CSS Selector选择器主要分类描述如上图，其中我们较为常用的选择器主要包括基本选择器、关系选择器及伪选择器中的部分类型。总之，一句话概括的话：选择器的作用就是从HTML文档中找出需要设置样式的一个或者多个HTML元素。

基本常用选择器

本文中我们选取部分常用选择器对其语法进行简单说明，并通过实例进行应用说明与展示。

（一）基本选择器

基本选择器中元素选择器、类选择器与ID选择器是较为常用选择器，也是大部分教材中详细介绍过的选择器类型。常用基本选择器描述如下图：

属性选择器

在基本选择器中以上4类为常用选择器，除此之外初学者使用较少但非常重要的选择器为属性选择器。属性选择器主要根据元素的属性确定选择元素并进行样式的设置。属性选择器主要类型包括7种不同类型选择器，描述如下图所示：

CSS属性选择器常用的其中方法描述如上图所示，通过属性值的选择方式确定选中的元素，进而实现元素样式的设置。属性选择器说明如下：

以下我们通过实例进行说明，HTML代码描述如下：

我们在页面中添加6个不同层，并设置其基本样式，如上图所示，通过使用属性选择器实现样式的改变。原始页面效果如下图：

1、[attr]选择器

该选择器主要根据属性名称确定选中的标记，并对其进行设置。我们将示例文件中的前三个div设置ID属性并以此为选择条件进行DIV样式修改。代码部分如下：

<div id="a">1</div>
<div id="2">2</div>
<div id="3">3</div>

编写选择器如下：

[id]{background-color: red;}

通过该选择器的使用可以准确找到需要设置样式的元素。最终实现效果如下图所示：

2、[attr=value]选择器

以第一种选择器相比较除属性名称之外还需要满足取值等于value。如我们需要将上例中id值为2的DIV进行样式设置，则可直接编写选择器：

[attr="2"]{background-color:red;}

通过value值对attr属性进行筛选，最终找到符合条件的DIV实现背景颜色变化。测试效果如下：

3、[attr~=value]选择器

该选择器可以选择对应属性attr的值为列表形式，且值列表中包含value值。如我们在定义样式中对于多个类选择器的使用一般写法如下：

<div class="cl1 cl2 cl3" id="4">4</div>

上述代码即符合多个属性值，中间空格隔开，因此我们可以编写选择器实现对这个DIV的选择。实现代码如下：

[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}

我们选中该DIV实现样式设置，最终呈现效果如下：

4、[attr|=value]选择器

该选择器主要对attr属性取值为value或者以value-为前缀的元素进行选择。我们将第五个DIV代码进行修改描述如下：

<div class="pure-g pure-from">5</div>

如果要选择这个DIV我们可以编写以下选择器，代码如下：

[class|="pure"]{font-size: 36px;color:white; background-color: gray;}

通过以上选择器及样式编写，可将第五个DIV样式进行修改，显示结果如下：

5、[attr^=value]选择器

该选择器基本与|value选择器类似，只是要求取值为value开头的值。我们修改第六个DIV的代码如下：

<div id="mytest">6</div>

通过编写选择器，在value中包含my进行测试，选择器代码如下：

[id^="my"]{font-size: 36px;color:white; background-color: yellow;}

代码中我们修改了背景颜色为黄色，测试结果如下所示：

6、[attr*=value]选择器

该选择器要求属性attr对应的属性值中包含value，如果包含则选中该元素。我们将第二个DIV进行代码编写，如下：

<div class="val1 val2 val3">2</div>

我们定义如下选择器：

[class*="val1"]{background-color:magenta;}

通过以上选择器我们可以选中第二个DIV，并实现样式设置，我们将背景颜色改为magenta。实现效果如下：

7、[attr$=value]选择器

该方法用于选择attr属性值中以value结尾的元素。我们将第三个DIV代码进行修改，如下：

<div id="mylast">3</div>

编写选择器代码如下：

[id$="last"]{background-color:steelblue;}

通过该选择器可以选择第三个DIV并对其背景颜色进行设置，测试结果如下：

以上给出了常用的基本属性选择器与属性选择器的说明及实例分析。下篇文章我们将对关系选择器进行说明。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！相关文章链接如下：

Web前端设计-JavaScript动态设置CSS样式实例分析

前端设计-JavaScript实现复选框的分组单选

文：https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/

如题。但是不要担心，虽然属性选择器非常复杂和强大，但是它们很容易学习和使用。在本文中，我们将讨论它们是如何运行的，并给出一些如何使用它们的想法。

通常将 HTML 属性放在方括号中，称为属性选择器，如下：

[href] {
 color: red;
}

这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的。属性选择器的特性与类相同。

注:更多关于笼匹配的CSS特异性，你可以阅读CSS特性:你应该知道的事情，或者如果你喜欢星球大战:CSS特性战争。

但是你可以使用属性选择器做得更多。就像你的 DNA 一样，它们有内在的逻辑来帮助你选择各种属性组合和值。它们可以匹配属性中的任何属性，甚至字符串值，而不是像标签、类或id选择器那样精确匹配。

属性选择器

属性选择器可以独立存在，更具体地说，如果需要选择所有具有title属性的div标签，可以这么做：

div[title]

但你也可以通过以下操作选择具有 title 属性的 div 的子元素

div [title]

需要说明的是，它们之间没有空格意味着属性位于相同的元素上(就像元素和类之间没有空格一样)，而它们之间的空格意味着后代选择器，即选择具有该属性的元素的子元素。

你可以更精细地选择具体属性值的属性。

div[title="dna"]

上面选择了所有具有确切名称dna的div,虽然有选择器算法可以处理每种情况（以及更多），但这里不会选择“dna is awesome”或“dnamutation”的标题。

注意:在大多数情况下，属性选择器中不需要引号，但是我使用它们，因为我相信它可以提高清代码的可读性，并确保边界用例能够正常工作。

如果你想选择 title 包含 dna的元素，如 “my beautiful dna” 或者 “mutating dna is fun!” ，可以使用波浪号（~）。

div[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 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等。

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

一般用途

输入类型样式的设置

你可以对输入类型使用不同的样式，例如电子邮件和电话。

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

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

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

重写特定的内联样式

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

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

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

<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"
Teenage Mutant Ninja Myrtle</div>
div[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;
}

喜欢小编的可以点个赞关注小编哦，小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！

如果你也想学习前端，那么帮忙转发一下然后再关注小编后私信【1】可以得到我整理的这些前端资料了（私信方法：点击我头像进我主页有个上面有个私信按钮）