使用例子：
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>
运行结果：
