017-属性选择器

2024-02-01 23:29:22
<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        /* 
            [属性名] 选择含有指定属性的元素
            [属性名 = 属性值] 选择含有指定属性和属性值的元素
            [属性名 ^= 属性值] 选择属性值以指定值开头的元素
            [属性值 $= 属性值] 选择属性值以指定值结尾的元素
            [属性值 *= 属性值] 选择属性值中含有某值的元素
        */
        /* p[title]{
            color: orange;
        } */
        /* p[title="abc"]{
            color: red;
        } */
        /* p[title^="abc"]{
            color: blue;
        } */
        /* p[title$="abc"]{
            color: crimson;
        } */
        p[title*="abc"]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="abc">少小离家老大回</p>
    <p title="abcdef">乡音无改鬓毛衰</p>
    <p title="helloabc">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p>秋水共长天一色</p>
    <p>落霞与孤鹜齐飞</p>
</body>
</html>
码农公寓

相关文章
