属性选择器

属性选择器

什么是属性选择器

根据指定的属性名找到对应的标签，然后设置属性。

css2中的属性选择器

[attribute] 选择器

格式： 为带有 target 属性的 元素设置样式

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

[attribute=value] 选择器

格式：为 target="_blank" 的 元素设置样式

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

主要运用于区分input属性

[attribute~=value] 选择器

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

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

[attribute|=value] 选择器

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

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

css3中的属性选择器

[attribute^=value]选择器

格式： 设置 class 属性值以 “test” 开头的所有 div 元素的背景色

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

[attribute$=value]选择器

格式：设置 class 属性值以 “test” 结尾的所有 div 元素的背景色

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

[attribute*=value]选择器

格式： 设置 class 属性值包含 “test” 的所有 div 元素的背景色

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

1.可以结合正则表达式记忆^和$分别代表开头和结尾

2.css2和css3中选择器前边都可以加标签名，如果不加就是直接选择属性，加了就是先选择标签，再选择属性

CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别

1. [attribute ^= value] 可以同 attribute 值等于 value，或者 attribute 值以 value 开头后面跟任意字符的情况匹配；
2. [attribute |= value] 可以同 attribute 值等于 value，或者 attribute 值以 value 开头且后面只能紧跟 “-” 字符的情况匹配；
3. 可以说 [attribute |= value] 限定跟严格。只要 [attribute |= value] 能匹配到的情况，[attribute ^= value] 都能匹配到。[attribute |= value] 是 [attribute ^= value] 的"子集"。

[attribute ~= value] 与 [attribute *= value] 的联系与区别：

1. [attribute ~= value] 可以同 attribute 值等于 value，或者 attribute 值有 value 这个单词就能匹配，并且value值是被空格隔开的；
2. [attribute *= value] 可以同 attribute 值等于 value，或者 attribute 值有 value 这个单词，或者在 attribute 值的前后添加任意字符，只要其中包含 value 这个字符串都能匹配；
3. 可以说 [attribute ~= value] 限定更严格。只要 [attribute ~= value] 能匹配到的情况，[attribute *= value] 都能匹配到。[attribute ~= value] 是 [attribute *= value] 的"子集"。

参考网址：https://www.cnblogs.com/xinjie-just/p/6780605.html