CSS选择器 2

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>

运行结果：

 

 

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

 

修改选择器为

[title = 'div']

显示结果为：

 

 

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

 

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

将上例选择器修改为

[title ~= 'div']

 

 

修改选择器

[title |= 'div']

 

 

修改选择器

[title ^= 'div']

 

 

修改选择器

title $= 'div'

 

 

修改选择器

title *= 'div'

 

 

 

posted @ 2021-06-09 09:35  /**serenity*/  阅读(37)  评论(0)    收藏  举报