css属性选择器

使用例子：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
</head>
<style type="text/css">
    /*以above开头的class属性*/
    [class^="above"] {
        margin: 16px;
        padding: 4px;
        background-color: #e7e7e7;
        border-radius: 5px;
        text-align: center;
    }
    /*以back结尾的class属性*/
    [class$="back"] {
        margin: 16px;
        padding: 4px;
        background-color: darkseagreen;
        border-radius: 5px;
        text-align: center;
    }
    /*有center的class属性*/
    [class*="center"] {
        margin: 16px;
        padding: 4px;
        background-color: darksalmon;
        border-radius: 5px;
        text-align: center;
    }
    /*有whole、必须是整个单词的class属性*/
    [class|="whole"] {
        margin: 16px;
        padding: 4px;
        background-color: dimgray;
        border-radius: 5px;
        text-align: center;
    }
    /*是specify的class属性*/
    [class~="specify"] {
        margin: 16px;
        padding: 4px;
        background-color: palevioletred;
        border-radius: 5px;
        text-align: center;
    }
</style>
<body>

<div class="exm">
    <div class="above-1">class属性名开头是above字样的，显示的class样式是class="above"的</div>
    <div class="aboveM1">class属性名开头是above字样的，显示的class样式是class="above"的</div>

    <div class="1-back">class属性名结尾是back字样的，显示的class样式是class="back"的</div>
    <div class="M1back">class属性名结尾是back字样的，显示的class样式是class="back"的</div>

    <div class="1-center">class属性名里有center字样的，显示的class样式是class="center"的</div>
    <div class="centerM1">class属性名里有center字样的，显示的class样式是class="center"的</div>

    <div class="whole-1">class属性名开头是whole字样的，并且是整个单词，显示的class样式是class="whole"的</div>
    <div class="wholeM1">我就不是</div>

    <div class="specify">class属性名是specify字样的，并且是整个单词，显示的class样式是class="specify"的</div>
</div>

</body>
</html>

运行结果：

 

posted @ 2018-03-03 16:55  娜娜娜娜小姐姐  阅读(173)  评论(0)  编辑  收藏  举报