zoukankan      html  css  js  c++  java
  • css3 ---2 属性的选择器

    存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。

                [name]{
                    background: pink;
                }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>存在和值属性选择器</title>
            <style type="text/css">
                /*
                 [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
                */
                [name]{
                    background: pink;
                }
            </style>
        </head>
        <body>
            <div name="atguigu_llc">李立超</div>
            <div name="atguigu_xfz">晓飞张</div>
            <div name="atguigu_bhj">白浩杰</div>
            <div name="atguigu_sym">腿长1米8</div>
            <div>佟刚</div>
            <div>陈雷</div>
            <div>李贺飞</div>
        </body>
    </html>
    View Code

    存在和值属性选择器2:[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。

                [name="atguigu_llc"]{
                    background: pink;
                }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>存在和值属性选择器</title>
            <style type="text/css">
                /*
                 [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
                */
                [name="atguigu_llc"]{
                    background: pink;
                }
            </style>
        </head>
        <body>
            <div name="atguigu_llc">李立超</div>
            <div name="atguigu_xfz">晓飞张</div>
            <div name="atguigu_bhj">白浩杰</div>
            <div name="atguigu_sym">腿长1米8</div>
            <div>佟刚</div>
            <div>陈雷</div>
            <div>李贺飞</div>
        </body>
    </html>
    View Code

    存在和值属性选择器3 :

    [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,
    比如位于被空格分隔的多个类(class)中的一个类。

                [name~="atguigu"]{
                    background: pink;
                }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>存在和值属性选择器</title>
            <style type="text/css">
                /*
                 [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,
                    比如位于被空格分隔的多个类(class)中的一个类。
                */
                [name~="atguigu"]{
                    background: pink;
                }
            </style>
        </head>
        <body>
            <div name="atguigu_llc atguigu">李立超</div>
            <div name="atguigu_xfz">晓飞张</div>
            <div name="atguigu_bhj atguigu">白浩杰</div>
            <div name="atguigu_sym">腿长1米8</div>
            <div>佟刚</div>
            <div>陈雷</div>
            <div>李贺飞</div>
        </body>
    </html>
    View Code

    存在和值属性选择器4:

      

    [attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素
    [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
    [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
    [attr*=val] : 选择attr属性的值中包含字符串val的元素。

                [name*="atguigu"]{
                    background: pink;
                }
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>存在和值属性选择器</title>
            <style type="text/css">
                /*
                 [attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素
                 [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
                 [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
                 [attr*=val] : 选择attr属性的值中包含字符串val的元素。
                */
                [name*="atguigu"]{
                    background: pink;
                }
            </style>
        </head>
        <body>
            <div name="atguigu-llc atguigu">李立超</div>
            <div name="atguigu-xfz">晓飞张</div>
            <div name="atguigu-bhj atguigu">白浩杰</div>
            <div name="atguigu_sym">腿长1米8</div>
            <div>佟刚</div>
            <div>陈雷</div>
            <div>李贺飞</div>
        </body>
    </html>
    View Code
  • 相关阅读:
    程序员的算法课(10)-字符串排序算法实例(纯代码)
    程序员的算法课(9)-常见字符串算法
    程序员的算法课(8)-贪心算法:理解霍夫曼编码
    程序员的算法课(7)-01背包问题
    程序员的算法课(6)-最长公共子序列(LCS)
    吴晓波跨年演讲全文-预见-2020 (八、奥运激荡,5G热潮)
    吴晓波跨年演讲全文-预见-2020 (七、资本市场回暖可期)
    吴晓波跨年演讲全文-预见-2020 (六、快公司面临期中考)
    吴晓波跨年演讲全文-预见-2020 (五、硬科技催生慢哲学)
    吴晓波跨年演讲全文-预见-2020 (四、体验经济,美好爆发)
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11763750.html
Copyright © 2011-2022 走看看