• 属性选择器


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


    属性选择器:

    除了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>
    
  • 相关阅读:
    Python自然语言处理资料库
    Solr 中 Schema 结构说明
    solr 高亮显示
    HTML URL 编码
    IDEA java开发 Restful 风格的WebService
    Intellij IDEA中使用log4j日志
    IntelliJ IDEA java开发 WebService
    java 实现poi方式读取word文件内容
    Ubuntu安装nodeJS
    Ubuntu 系统下 mongodb 安装和配置
  • 原文地址:https://www.cnblogs.com/surewing/p/10316951.html
Copyright © 2020-2023  润新知