<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style type="text/css">
            /* 
                属性选择器:
                    作用: 可以根据元素中的属性或属性值来选取指定元素
                语法:
                    [属性名] 选取含有指定属性的元素
                    [属性名="属性名"] 选取含有指定属性值的元素
                    [属性名^="属性值"] 选取属性值以指定内容开头的元素
                    [属性名$="属性值"] 选取属性值以指定内容结尾的元素
                    [属性名*="属性值"] 选取属性值以包含指定内容的元素
                    
            */
           
           p[title]{
               background-color: red;
           }
           
           /* 
                [属性名="属性名"] 选取含有指定属性值的元素
            */
           p[title="hello"]{
               background-color: blue;
           }
           
           /* 
                [属性名^="属性值"] 选取属性值以指定内容开头的元素
            */
           p[title^="ab"]{
               background-color: #7FFF00;
           }
           
           /* 
                [属性名$="属性值"] 选取属性值以指定内容结尾的元素
            */
           p[title$="c"]{
               background-color: #FF8C00;
           }
           
           /* 
                [属性名*="属性值"] 选取属性值以包含指定内容的元素
            */
           p[title*="a"]{
               background-color: azure;
           }
        </style>
    </head>
    <body>
        <!-- 
            title属性,这个属性可以给任何标签指定
                当鼠标移动到元素上时,元素中的title属性的值将会作为提示文字显示
         -->
         
         <p title="hello">我是一个段落</p>
         <p title="adc">我是一个段落</p>
         <p title="abd">我是一个段落</p>
         <p>我是一个段落</p>
         <p title="bye">我是一个段落</p>
         
    </body>
</html>
posted on 2021-06-29 14:41 leiyanting 阅读(305) 评论(0) 收藏举报
刷新页面返回顶部
导航
