一真的小站

鳶飛魚躍,無處不是化境。

0%

十二、属性选择器

属性选择器

属性选择器:

属性是相对于标签而言,所谓属性选择器就是你根据指定名称的属性的值来查找元素。

主体

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<pstyle="">看看能不能也添加样式</p>
<ol>
<li class="red" style="">河南再次发生矿难,死伤人数超过100</li>
<li class="blue">禽流感次发生蔓延,温家宝指示</li>
<li class="darkred" style="">南方农作物减产绝收面积上亩</li>
<li class="blue">猪流感在广减产绝收发</li>
<li class="red">全国多作物减产绝收面积上亩</li>
<li class="blueviolet">猪流感在广东群体性暴发</li>
</ol>

</body>

1.E[attr]

1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的1i标签

1
2
3
4
5
6
7
<head>
<style>
li[style] {
text-decoration: underlinel;
}
</style>
</head>

2.E[attr=value]

2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的标签且是严格匹配

1
2
3
4
5
<style>
li[class=red] {
font-size: 30px;
}
</style>

3.E[attr*=value]

3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签

1
2
3
4
5
<style>
li[class*=red] {
font-size: 30px;
}
</style>

4.E[attr =value]

4.E[attr =value]:查找拥有指定的attr属性并且属性值以value开头的E标签

1
2
3
4
5
<style>
li[class^=blue] {
font-size: 30px;
}
</style>

5.E[attr$=value]

5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签

1
2
3
4
5
<style>
li[class$=blue] {
font-size: 30px;
}
</style>