前端——属性选择器

最新推荐文章于 2024-09-04 20:29:03 发布

翊小宸

最新推荐文章于 2024-09-04 20:29:03 发布

阅读量111

点赞数

分类专栏：前端文章标签： CSS 属性选择器颜色样式 HTML 段落

本文链接：https://blog.csdn.net/weixin_45058912/article/details/118528408

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

        
        /* 
            [属性名] 选择含有指定属性的元素
            [属性名=属性值] 选择含有指定属性和属性值的元素
            [属性名^=属性值] 选择属性值含有指定元素开头的元素
            [属性名$=属性值] 选择属性值含有指定元素结尾的元素
            [属性名*=属性值] 选择属性值含有指定某值的元素


        */
        p[title]{
            color: orange;
        }

        p[title=abc]{
            color: blue;
        }

        p[title^=abc]{
            color: cornflowerblue;
        }

        p[title$=abc]{
            color: crimson;
        }

        p[title*=abc]{
            color: skyblue;
        }

        p[title*=e]{
            color: green;
        }

    </style>

</head>
<body>

    <p title="abc">两情若是久长时</p>
    <p title="abcdef">又岂在朝朝暮暮</p>
    <p title="helloabc">身无彩凤双飞翼</p>
    <p>心有灵犀一点通</p>
    <p>衣带渐宽终不悔</p>
    <p>为伊消得人憔悴</p>

    
</body>
</html>