属性选择器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    <style type="text/css">
    /*
    为所有具有title属性的p元素，设置一个背景颜色为黄色
    属性选择器
    作用：
    可以根据元素中的属性或属性值来选取指定元素
    语法:
    1.[属性名] 选取含有指定属性的元素
    2.[属性名="属性值"] 选取含有指定属性值的元素
    3.[属性名^"属性值"] 选取属性值以指定内容开头的元素
    4.[属性名$"属性值"] 选取属性值以指定内容结尾的元素
    5.[属性名*"属性值"] 选取属性值包含指定内容的元素
    p[title]{
        background-color:yellow;
    }*/
    p[title]{
        background-color:yellow;
    }
    p[title="hello"]{
        background-color: aqua;
    }
    p[title^="ab"]{
        background-color: blue;
    }
    p[title$="d"]{
        background-color: antiquewhite;
    }
    </style>
    </head>
    
    <body>
        <!--
        属性选择器：
        1.title属性
        这个属性可以给任何标签指定
        当鼠标移入到元素上时，元素中的title属性的值会作为提示文字显示
        -->
        <p title="我是title中的文字">我是一个段落</p>
        <p title="abc">我是一个段落</p>
        <p title="abb">我是一个段落</p>
        <p title="hello">我是一个段落</p>
        <p title="dd">我是一个段落</p>
        <p title="dx">我是一个段落</p>
    </body>
</html>

 

posted @ 2019-07-09 22:03  zuiaimiusi  阅读(150)  评论(0)    收藏  举报