CSS选择器（5）——属性选择器
2021-02-07 03:18
阅读：630
在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过ID属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器，这些选择器可基于元素的属性匹配元素，而CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配定位元素。
属性选择器
E[attr]
选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素。
为带有 target 属性的 元素设置样式：
a[target]
{
background-color:yellow;
}E[attr = val]
选择匹配具有属性attr的E元素，并且attr的属性值为val，完全匹配。
为 target="_blank" 的 元素设置样式：
a[target=_blank]
{
background-color:yellow;
}E[attr |= val]
选择匹配具有属性attr的E元素，并且该属性值具有val或者以val-开头的单词。
[lang|=en]
{
background-color:yellow;
}
Hello!
Hi!
Ello!
//匹配不上下面这个
Ello!
E[attr~=val]
选择匹配具有属性attr的E元素，并且该元素的值中包含val单词，常用在多属性值当中。
[title~=flower]
{
border:5px solid yellow;
}
E[att*=val]
选择匹配具有属性attr的E元素，并且属性值的任意位置包含val字符串
div[class*="test"]
{
background:#ffff00;
}
第一个 div 元素。
第二个 div 元素。
第三个 div 元素。E[attr^=val]
选择匹配具有属性attr的E元素，并且属性值以val开头。
[class^="test"]
{
background:#ffff00;
}
第二个 div 元素。
第三个 div 元素。
这是段落中的文本。
E[attr$=val]
选择匹配具有属性attr的E元素，并且属性值以val结尾。
div[class$="test"]
{
background:#ffff00;
}
第一个 div 元素。
第二个 div 元素。
第三个 div 元素。评论
亲，登录后才可以留言！