• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

CSS选择器 2

开发技术 开发技术 2天前 4次浏览

3.4属性选择器

选择器

描述

[attribute]

选取带有指定属性的元素。

[attribute=value]

选取带有指定属性和值的元素。

[attribute~=value]

选取属性值中包含指定词汇的元素。

[attribute|=value]

选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[attribute^=value]

匹配属性值以指定值开头的每个元素。

[attribute$=value]

匹配属性值以指定值结尾的每个元素。

[attribute*=value]

匹配属性值中包含指定值的每个元素。

 

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<title></title>

<style>

div{

width: 100px;

height: 50px;

border: 1px solid gray;

}

[title] {

background-color: green;

}

</style>

</head>

<body>

<div title=”div1″>1</div>

<div title=”div2″>2</div>

<div>3</div>

<div title=”a div”>4</div>

<div title=”div a”>5</div>

<div title=”div”>6</div>

</body>

</html>

运行结果:

CSS选择器 2

 

 

从结果可以看出,只有第3个div没有背景色,因为只有它没有title属性。

 

修改选择器为

[title = ‘div’]

显示结果为

CSS选择器 2

 

 

从结果可以看出,只有第6个div应用了绿色背景的样式,因为只有第6个div的title属性等于div

 

~=:选中属性值包含指定完整单词的元素,类似word中的全字匹配

将上例选择器修改为

[title ~= ‘div’]

CSS选择器 2

 

 

修改选择器

[title |= ‘div’]

CSS选择器 2

 

 

修改选择器

[title ^= ‘div’]

CSS选择器 2

 

 

修改选择器

title $= ‘div’

CSS选择器 2

 

 

修改选择器

title *= ‘div’

CSS选择器 2

 

 

 


程序员灯塔
转载请注明原文链接:CSS选择器 2
喜欢 (0)