Attribute属性选择器

利用HTML元素的特定属性来选择元素有很多种方法。下面会依次介绍各种属性选择器。

CSS [attribute] 选择器

利用[attribute]属性选择器可以选择具有该指定属性的HTML元素。（该属性可以是标准属性，也可以是凭空造出来的属性，但是肯定是标准属性的浏览器兼容性更广。）

如下例所示：

a[target] {
    background-color: yellow;
}

运行一下

举一个凭空造出来的fuck属性，如下例所示，所有具有fuck属性的元素，都会表现为背景黄色，上面的例子和a元素进行了组合，这个例子中不仅凭空造出fuck属性，而且不和a元素组合，这也就是为啥具有fuck属性的span元素也会表现为背景黄色。

[fuck] {
    background-color: yellow;
}

运行一下

CSS [attribute="value"] 选择器

使用[attribute="value"]选择器来选择指定属性等于指定值的HTML元素。如下所示，选择target属性等于_blank的a元素：

a[target="_blank"] { 
    background-color: yellow;
}

运行一下

CSS [attribute~="value"] 选择器

使用[attribute~="value"]选择器来选择指定属性包含指定值的HTML元素。如下所示，选择title~="zhuan"的元素即target属性中只要含有“zhuan”这个词的都属于目标元素。（被包含的这个词必须是独立成词的，更详细解释请看下方备注）

[title~="zhuan"] {
    background-color: yellow;
}

运行一下

---

备注：title~="zhuan"这个词指目标target属性中只要含有“zhuan”这个词的都属于目标元素，像“zhuan fou”、“zhuan”、“fuck zhuan jia”等都是符合该选择器规则；而“zhuanfou”、“zhuan-fou”等都不符合，因为“zhuan”没有被空格隔开而单独成词。

---

CSS [attribute*="value"] 选择器

使用[attribute*="value"]选择器来选择指定属性包含指定值的HTML元素。该选择器只要指定属性包含指定值即可，不需要指定值独立成词。

[title*="zhuan"] {
    background-color: yellow;
}

运行一下

---

CSS [attribute|="value"] 选择器

使用[attribute|="value"]选择器来选择指定属性以指定值开头的HTML元素。但是开头的这个词必须是完整的，与后续的词之间必须以-符号来隔开，示例参详下方备注。

[class|="top"] {
    background: yellow;
}

运行一下

---

备注：class|="top"这个选择器，符合的class取值有“top-title”、“top”、“top-”、“top-666”等；“topcontent”、“top666”、“my-top”则不符合。

---

CSS [attribute^="value"] 选择器

使用[attribute^="value"]选择器来选择指定属性以指定值开头的HTML元素。而这个选择器不同的是不要求指定值是完整单词，只要开头是指定值，后面不管是什么都无所谓。

[class^="top"] {
    background: yellow;
}

运行一下

CSS [attribute$="value"] 选择器

使用[attribute$="value"]选择器来选择指定属性以指定值结尾的HTML元素。不要求指定值是完整单词，只要结尾是指定值，前面不管是什么都无所谓。

[class$="tent"] {
    background: yellow;
}

运行一下

案列：设置表单元素的样式

属性选择器已经介绍得差不多了，都挺实用的，最后举一个例子来进一步说明：

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    border: 1px solid #46acb6;
    background-color: #eef8f8;
}

input[type="button"] {
    width: 100px;
    margin-left: 55px;
    margin-top: 18px;
    display: block;
}

运行一下