• css属性选择器


    使用例子:

    html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS选择器</title>
    </head>
    <style type="text/css">
        /*以above开头的class属性*/
        [class^="above"] {
            margin: 16px;
            padding: 4px;
            background-color: #e7e7e7;
            border-radius: 5px;
            text-align: center;
        }
        /*以back结尾的class属性*/
        [class$="back"] {
            margin: 16px;
            padding: 4px;
            background-color: darkseagreen;
            border-radius: 5px;
            text-align: center;
        }
        /*有center的class属性*/
        [class*="center"] {
            margin: 16px;
            padding: 4px;
            background-color: darksalmon;
            border-radius: 5px;
            text-align: center;
        }
        /*有whole、必须是整个单词的class属性*/
        [class|="whole"] {
            margin: 16px;
            padding: 4px;
            background-color: dimgray;
            border-radius: 5px;
            text-align: center;
        }
        /*是specify的class属性*/
        [class~="specify"] {
            margin: 16px;
            padding: 4px;
            background-color: palevioletred;
            border-radius: 5px;
            text-align: center;
        }
    </style>
    <body>
    
    <div class="exm">
        <div class="above-1">class属性名开头是above字样的,显示的class样式是class="above"的</div>
        <div class="aboveM1">class属性名开头是above字样的,显示的class样式是class="above"的</div>
    
        <div class="1-back">class属性名结尾是back字样的,显示的class样式是class="back"的</div>
        <div class="M1back">class属性名结尾是back字样的,显示的class样式是class="back"的</div>
    
        <div class="1-center">class属性名里有center字样的,显示的class样式是class="center"的</div>
        <div class="centerM1">class属性名里有center字样的,显示的class样式是class="center"的</div>
    
        <div class="whole-1">class属性名开头是whole字样的,并且是整个单词,显示的class样式是class="whole"的</div>
        <div class="wholeM1">我就不是</div>
    
        <div class="specify">class属性名是specify字样的,并且是整个单词,显示的class样式是class="specify"的</div>
    </div>
    
    </body>
    </html>

    运行结果:

  • 相关阅读:
    Python pydoc.py
    Python dir
    HTTPS Web配置举例
    Kubernetes 笔记 03 扫清概念
    一文总结 Linux 虚拟网络设备 eth, tap/tun, veth-pair
    一文掌握 Linux 性能分析之内存篇
    云计算底层技术之高性能集群
    利用 Linux tap/tun 虚拟设备写一个 ICMP echo 程序
    Linux 网络工具详解之 ip tuntap 和 tunctl 创建 tap/tun 设备
    [原创] 详解云计算网络底层技术——虚拟网络设备 tap/tun 原理解析
  • 原文地址:https://www.cnblogs.com/nananana/p/8497126.html
Copyright © 2020-2023  润新知