属性选择器

Posted 2020-08-31

1、[attribute]

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

<a href="#">aaa</a>

<a href="#" target="_blank">bbb</a>

2、[attribute=value]

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

<a href="#">aaa</a>

<a href="#" target="_blank">bbb</a>

3、[attribute~=value]：对属性中包含flower的元素进行样式设置

[title~=flower]
{
border:5px solid yellow;
}

<img src="/i/eg_tulip.jpg" title="tulip flower" />

4、[attribute|=value]：对于属性中以en开头的元素进行样式设置

[lang|=en]

{
background:yellow;
}

<p lang="en-us">Hi!</p>

5、[attribute^=value]：css3的属性，设置 class 属性值以 "test" 开头的所有 div 元素的背景色：

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

<div class="test"> div 元素。</div>

6、[attribute$=value]：css3的属性，设置 class 属性值以 "test" 结尾的所有 div 元素的背景色：

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

<div class="first_test">第一个 div 元素。</div>

7、[attribute*=value]：设置 class 属性值包含 "test" 的所有 div 元素的背景色

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

<div class="first_test">第一个 div 元素。</div>