CSS3知识点总结----属性选择器

1、E[attr]只使用属性名，但没有确定任何属性值

2、E[attr="value"]指定属性名，并指定了该属性的属性值

3、E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

4、E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

5、E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

6、E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

7、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    p[shuxing]{background:red;}
    p[shuxing="1"]{background:blue;}
    p[shuxing ~="2"]{background:yellow;}
    p[shuxing ^="g"]{background:black;}
    p[shuxing $="g"]{background:pink;}
    p[shuxing *="g"]{background:green;}
    p[shuxing = "5gyd"]{background:gray;}
</style>
<body>
    <p shuxing="b1">1</p>
    <p shuxing="b2 a">2</p>
    <p shuxing="gz3">3</p>
    <p shuxing="4yg">4</p>
    <p shuxing="5gyd">4</p>
</body>

</html>

E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

posted on 2017-01-06 16:24 floated 阅读(279) 评论(0) 收藏举报