CSS属性选择器实战-CSDN博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        <style type="text/css">
            /* 
                为所有具有title属性的P元素设置背景

                属性选择器:根据元素属性或属性值选取元素
                    语法:   [属性名]选取指定元素属性
                            [属性名=属性值]
                            [属性名^=属性值]前包含
                            [属性名$=属性值]后包含
                            [属性名*=属性值]中包含
             */
            p[title]{
                background-color: cadetblue;
            }
            /* 指定title值为hello的 */
            p[title="hello"]{
                background-color: chartreuse;
            }
            /* 指定title以ab开头 */
            p[title^="ab"]{
                background-color: darkgreen;
            }
            p[title$="c"]{
                background-color: darkmagenta;
            }
            p[title*="c"]{
                background-color: darkmagenta;
            }
        
        </style>


    </head>


    <body>
        <!-- 
            title属性，这个属性可以给任何标签指定
                -当鼠标移入到元素上，title属性值作为提示文字显示
         -->
        
        <p title="我是title中的文字">只是一个标签</p>
        <p title="abjkhj">只是一个标签1</p>
        <p title="abc">只是一个标签2</p>
        <p title="hello">只是一个标签3</p>
        <p title="hellc">只是一个标签3</p>
        <p>只是一个标签4</p>

    </body>


</html>