zoukankan      html  css  js  c++  java
  • 属性选择器

    标签(空格分隔): 属性选择器


    属性选择器:

    除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素

    根据属性查找

    [title] {
      color: red;
    }
    

    根据属性和值查找

    找到所有title属性等于hello的元素:

    [title="hello"] {
      color: red;
    }
    

    找到所有title属性以hello开头的元素:

    [title^="hello"] {
      color: red;
    }
    

    找到所有title属性以hello结尾的元素:

    [title$="hello"] {
      color: red;
    }
    

    找到所有title属性中包含(字符串包含)hello的元素:

    [title*="hello"] {
      color: red;
    }
    

    表单常用

    input[type="text"] {
      backgroundcolor: red;
    }
    

    如下代码案例;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style tyep="text/css">
            label[for]{
                color:red;
                font-size: 20px;
            }
            label[for='pwd']{
                color:yellow;
            }
            /*以。。。开头*/
            label[for^='vip']{
                color:yellow;
            }
            /*以。。。结尾*/
            label[for$='vip']{
                color:gray;
            }
            /*找到所有属性中包含。。。。*/
            label[for*='user']{
    
                color:gold;
            }
           /*属性选择器,通常在表单控件中使用比较频繁*/
        </style>
    
    </head>
    <body>
        <div class="box">
            <form action="">
                <label for="user">用户名:</label>
                <input type="text" name="" id="user">
                <label for="pwd">密码:</label>
                <label for="VIP">VIP1:</label>
                <label for="VIP2">VIP2:</label>
            </form>
        </div>
    
    </body>
    </html>
    
  • 相关阅读:
    CSS3(4)---动画(animation)
    MDT 2010驱动管理新方法。
    windows 2012 试用180天
    Mac地址绑定的wifi
    用于主题检测的临时日志(b2d5c7b3-e3f6-4b0f-bfa4-a08e923eda9b
    samba4.1.9安装
    samba权限之easy举例说明--原创
    NFS性能优化
    工作组环境下管理windows.
    管理windows防火墙
  • 原文地址:https://www.cnblogs.com/surewing/p/10316951.html
Copyright © 2011-2022 走看看