CSS3属性选择器详解及实例演示-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42744920/article/details/128113508

css3 属性选择器

	选择符               简介

    E[att]               选择具有att属性的E元素
    E[att='val']         选择具有att属性且属性值是val的E元素
    E[att^='val']        选择具有att属性，且值以val开头的E元素
    E[att$='val']        选择具有att属性，且值以val结尾的E元素
    E[att*='val']        选择具有att属性，且值含有val的E元素

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css3属性选择器</title>
    <style>
        button {
            cursor: pointer;
        }
        button[att1] {
            color:blue;
        }
        button[att2='att2'] {
            color:blueviolet;
        }
        button[att3^='start'] {
            color:brown;
        }
        button[att4$='end'] {
            color:burlywood;
        }
        button[att5*='center'] {
            color:chartreuse;
        }
    </style>
</head>
<body>
    <button>按钮</button>
    <button att1>按钮</button>
    <button att2="att2">按钮</button>
    <button att3="start11">按钮</button>
    <button att4="11end">按钮</button>
    <button att5="11center22">按钮</button>
</body>
</html>