1.css3追加的3中选择器:[att*=val],[att^=val],[att$=val]
2.[att*=val]
*是通配符,表示只要字符串中出现了这个val的(哪怕val只是一部分),如这个例子:[class*=div]:表示凡是div这个类都会出现效果(包含即可,不论是sdfasdiv还是divsfas)。
比如下面的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[class*=div]{
color:#00F;}
</style>
</head>
<body>
<div class=div1>
i'm a student
</div>
<div class=div2>
i'm a student
</div>
<div class=div3>
i'm a student
</div>
<div class=di>
i'm a student
</div>
</body>
</html>
3.[att^=val]:表示首字母串是val的会出现效果,比如下面的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[class^=div]{
color:#0F0}
</style>
</head>
<body>
<div class=1div1>
i'm a student
</div>
<div class=2div2>
i'm a student
</div>
<div class=div3>
i'm a student
</div>
<div class=di>
i'm a student
</div>
</body>
</html>
4.[att$=val]:表示结束字母串是val的出现效果,如下面这个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
[class$=i]{
color:#0F0}
</style>
</head>
<body>
<div class=1div1>
i'm a student
</div>
<div class=2div2>
i'm a student
</div>
<div class=div3>
i'm a student
</div>
<div class=di>
i'm a student
</div>
</body>
</html>