css中5种属性选择器

趋之2023-11-21 15:33

属性选择器

语法：

$属性名$ {} 选择含有指定属性的元素

$属性名=属性值$ {} 选择含有指定属性和属性值的元素

$属性名\^=属性值$ {} 选择属性值以指定值开头的元素

$属性名$=属性值$ {} 选择属性值以指定值结尾的元素

$属性名\*=属性值$ {} 选择属性值含有某值的元素

以下为演示代码：

html 复制代码

<!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>