什么是属性选择器（2019惠普面试）

1.概述：

可以根据元素的属性及属性值来选择元素

2.语法：

星号表示任意元素标签名; 通常属性值没有空格或特殊字符可以不加引号
E[att]，筛选具有att属性的元素

1.[attribute] 用于选取 带有指定属性的元素。

为带有 target 属性的 <a> 元素设置样式：
a[target]
{ 
background-color:yellow;
}

2.[attribute=value] 用于选取 带有指定属性和值的元素。

为 target="_blank" 的 <a> 元素设置样式：
a[target=_blank]
{ 
background-color:yellow;
}

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

选择 titile 属性包含单词 "flower" 的元素，并设置其样式：
[title~=flower]
{ 
background-color:yellow;
}

4.[attribute|=value] 带有以指定值开头的属性值的元素，该值必须是整个单词

选择 lang 属性值以 "en" 开头的元素，并设置其样式：
[lang|=en]
{ 
background-color:yellow;
}

5.[attribute^=value] 匹配属性值以指定值开头的每个元素。

设置 class 属性值以 "test" 开头的所有 div 元素的背景色：
div[class^="test"]
{
background:#ffff00;
}

6.[attribute$=value] 匹配属性值以指定值结尾的每个元素。

设置 class 属性值以 "test" 结尾的所有 div 元素的背景色：
div[class$="test"]
{
background:#ffff00;
}

7. [attribute=value*] 匹配属性值中包含指定值的每个元素

设置 class 属性值包含 "test" 的所有 div 元素的背景色：
div[class*="test"]
{
background:#ffff00;
}