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、实例结果
  • 相关阅读:
    用户画像
    华为离职副总裁徐家骏：年薪千万的工作感悟
    JAVA CAS原理深度分析-转载
    彻底理解ThreadLocal二
    彻底理解ThreadLocal一
    观察者模式(浅谈监听器工作原理)
    Java编程提高性能时需注意的地方
    Spring对Quartz的封装实现简单需注意事项
    FileInputStream和BufferedInputStream的区别
    java
  • 原文地址：https://www.cnblogs.com/web100/p/css3-attr.html
Copyright © 2011-2022 走看看