属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class和 id属性

[attribute] 选择器

定义

[attribute] 选择器用于选取带有指定属性的元素

实例

为带有 target属性的 <a>元素设置样式

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

[attribute=value] 选择器

定义

[attribute=target] 选择器用于选取带有指定属性和值的元素

实例

为 target="_blank" 的 <a> 元素设置样式

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

[attribute~=value] 选择器

定义

[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素

实例

选择 titile 属性包含单词 "flower" 的元素，并设置其样式

xxxxxxxxxx
[title~=flower]{ 
    background-color:yellow;
}

[attribute|=value] 选择器

定义

[attribute|=value] 选择器用于选取带有以指定值开头的属性值的元素

温馨提示

该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"

实例

选择 lang 属性值以 "en" 开头的元素，并设置其样式

xxxxxxxxxx
[lang|=en]{ 
    background-color:yellow;
}

[attribute^=value] 选择器

定义

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素

实例

设置 class 属性值以 "test" 开头的所有 div 元素的背景色

xxxxxxxxxx
div[class^="test"]{
    background:#ffff00;
}

[attribute$=value] 选择器

定义

[attribute$=value] 选择器匹配属性值以指定值结尾的每个元素

实例

设置 class 属性值以 "test" 结尾的所有 div 元素的背景色

xxxxxxxxxx
div[class$="test"]{
    background:#ffff00;
}

[attribute*=value] 选择器

定义

[attribute*=value] 选择器匹配属性值包含指定值的每个元素

实例

设置 class 属性值包含 "test" 的所有 div 元素的背景色

xxxxxxxxxx
div[class*="test"]{
    background:#ffff00;
}

实时效果反馈

1.下列代码展示的属性选择器属于哪个选择器：

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

A [attribute=value] 选择器

B [attribute*=value]

C [attribute^=value] 选择

D [attribute~=value]

答案

1=>A

实操

1. 【简答】简述关系选择器有哪些
2. 【实操】伪类选择器和伪对象选择器分别有哪些