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