zoukankan      html  css  js  c++  java

  • CSS3属性选择器

    1、基本介绍

    （1）[att*=val]属性选择器

             如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式

    （2）[att^=val]属性选择器

             如果元素用att表示的属性的属性值的开头字符为用val指定的字符，则该元素使用这个样式

    （3）[att$=val]属性选择器

             如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式

    2、实例说明

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5. <title>CSS3属性选择器</title>  
    6. <style type="text/css">  
    7.    [id*=div3]{  
    8.        background-color:#C00;  
    9.    }  
    10.    [id^=div2]{  
    11.        background-color:#0F0;  
    12.    }  
    13.    [id$=div1]{  
    14.        border:1px solid #00F;  
    15.        font-size:42px;  
    16.    }  
    17. </style>  
    18. </head>  
    19.   
    20. <body>  
    21.    <div id="div1">  
    22.       <p>Hello</p>  
    23.    </div>  
    24.    <div id="div1_div2">  
    25.       <p>您好！</p>  
    26.    </div>  
    27.    <div id="div1">  
    28.       <button>查询</button>  
    29.    </div>  
    30.    <div id="div2">  
    31.        <input id="man" type="radio"/>男  
    32.        <input id="woman" type="radio"/>女  
    33.    </div>  
    34.    <div id="div2_div1">  
    35.        <input type="text" value="姓名"/>  
    36.    </div>  
    37.    <div id="div1_div2_div3">  
    38.        <input type="checkbox"/>篮球  
    39.    </div>  
    40. </body>  
    41. </html>  

    3、实例结果
  • 相关阅读:
    LinkedList源码解析
    HashMap源码解析
    HashMap和Hashtable区别
    arcgis api for js 之网络分析服务发布
    arcgis api for js 之发布要素服务
    arcis api for js 值 3.17 本地部署
    ArcGIS 产品体系结构
    layui select下拉框选项不显示
    windows10企业版2016长期服务版激活
    PHP常见的输出语句
  • 原文地址：https://www.cnblogs.com/web100/p/css3-attr.html
Copyright © 2011-2022 走看看