属性选择器
语法:
[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
以下为演示代码:
<!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>属性选择器</title><style>/* 需求一:有title属性的p标签,颜色变为红色 *//* p[title]{color: tomato;} *//* [title=abc]{font-size: 30px;} *//* [title^=ab]{color: blue;} *//* [title$=ab]{color: turquoise;} */[title*=c]{color: skyblue;}</style>
</head>
<body><h1 title="a" >满江红·写怀</h1><h3 title="ab">岳飞·宋</h3><p>····</p><p title="abc">靖康耻,犹未雪。臣子恨,何时灭!</p><p title="abcdab">驾长车,踏破贺兰山缺。</p><p>壮志饥餐胡虏肉,笑谈渴饮匈奴血。</p><p>待从头、收拾旧山河,朝天阙。</p>
</body>
</html>