当前位置：首页 > news >正文

属性选择器

news 2025/8/22 6:18:58

1.[title]{background:yellow;}：所有带title标签设置成黄色

2.div[class]{background:yellow;}：所有div中带class标签设置成黄色

3.div[class=box1]{border:1px solid blue; }：div中包含class并且class=box1的设置成蓝边框

4. class^=b 以b开头的[title^=ab]{background-color: yellow;}，设置背景色黄色
class$=b 以b结尾
class*=b 包含b

5.div[class~=box1]{border:1px solid blue;}，只要class里面包含box1的设置成蓝边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 属性选择器 [class,,] */div[class]{background:yellow;}p[class]{background:red;}/* div .box1 {} *//* 完全匹配 *//* div[class=box1]{border:1px solid blue;} *//* 包含就匹配 */div[class~=box1]{border:1px solid blue;}input[name]{background:yellow;}input[type=email]{background:red;}/* 模糊匹配class^=b 以这个开头的class$=b 以这个结尾class*=b 包含某个字符 */div[class*="1"],p[class*="1"]{color:green;}</style>
</head>
<body><div class="box1">div-11111</div><div class="box2">div-22222</div><div >div-33333</div><div class="box1">div-44444</div><div class="box1 box3">div-555555555555555</div><p class="p1">p-11111</p><p class="p2">p-22222</p><p >p-33333</p><div><h1>注册页面</h1>用户名：<input type="text" name="username"> <br>密码：<input type="password" name="password"><br>年龄<input type="number" name="age"><br>邮箱<input type="email"><br></div>
</body>
</html>