css3属性选择器

transition向前兼容问题

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        background: red;
        transition: 1s;
    }

    .box:hover {
        width: 200px;
        height: 200px;
        background: blue;
    }
    </style>
</head>

<body>
    <div class="box"> </div>
</body>

</html>

测试得到其他浏览器都没问题，但是ie9和9以下，transition属性就失效了，不兼容。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    .box {
        width: 100px;
        height: 100px;
        background: red;
        /*transition: 1s;*/
        -webkit-transition:1s;/*兼容老版的chrome，safari*/
        -moz-transition:1s;   /*兼容老版的火狐*/
        -o-transition:1s;    /*兼容老版的opera*/
        transition: 1s;/*标准的*/
    }


    .box:hover {
        width: 200px;
        height: 200px;
        background: blue;
    }
    /*
	js里面不支持横杠,所以前缀去掉横杠，改成大写
	WebKitTransition
	OTransition
	MozTransition
    */
    </style>
</head>

<body>
    <div class="box"> </div>
</body>

</html>

css3属性选择器

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        height: 30px;
        border: 1px solid #000;
    }

    p[xichen] {
        background: red;
    }
    </style>
</head>

<body>
    <p xichen="leo">leo</p>
    <p xichen="kris">kris</p>
    <p xichen="jasper">jasper</p>
    <p xichen="hades">hades</p>
</body>

</html>

属性选择器

表示	含义
E[attr]	只使用属性名，但没有确定任何属性值
E[attr=”value”]	指定属性名，并制定了该属性的属性值
E[attr~=”value”]	指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的”~”不能不写
E[attr^=”value”]	指定属性名，并且具有属性值，属性值是以value开头的
E[attr$=”value”]	指定属性名，并且具有属性值，属性值是以value结束的
E[attr*=”value”]	指定属性名，并且具有属性值，而且属性值中包含了value
E[attr\	=”value”]	指定属性名，并且具有属性值，而且属性值是以value或者以”value-“开头的值（比如zh-cn）

小例子:仿百度文库分类图标

做出不同的文档类型前面加上不同的图标的效果。

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    p {
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        border: 1px solid #000;
    }

    p a {
        background: url(img/w.gif) no-repeat 3px center;
        padding-left: 20px;
        display: block;
    }

    p a[href*=text] {
        background-image: url(img/text.gif);
    }

    p a[href*=pdf] {
        background-image: url(img/pdf.gif);
    }

    p a[href*=excel] {
        background-image: url(img/excel.gif);
    }
    </style>
</head>

<body>
    <p>
        <a href="http://www.baidu.com/doc/javascript.html">百度文库</a>
    </p>
    <p>
        <a href="http://www.baidu.com/pdf/javascript.html">百度文库</a>
    </p>
    <p>
        <a href="http://www.baidu.com/text/javascript.html">百度文库</a>
    </p>
    <p>
        <a href="http://www.baidu.com/excel/javascript.html">百度文库</a>
    </p>
</body>

</html>