码迷,mamicode.com
首页 > Web开发 > 详细

css3 ---2 属性的选择器

时间:2019-10-30 12:02:25      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:splay   LLC   hide   back   utf-8   spl   onclick   oct   display   

存在和值属性选择器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

 

css3 ---2 属性的选择器

标签:splay   LLC   hide   back   utf-8   spl   onclick   oct   display   

原文地址:https://www.cnblogs.com/hack-ing/p/11763750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!