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

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

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

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

css3 ---2 属性的选择器的更多相关文章

  1. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  2. CSS3的属性选择器

    CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...

  3. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  4. CSS3常用属性

    CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...

  5. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  6. css3学习总结1--CSS3选择器

    CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...

  7. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  8. css3部分属性兼容性别扭写法（因为很多我就叫他别扭了，希望全面早早支持css3吧）

    /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...

  9. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

随机推荐

  1. 'ddkbuild.cmd' 不是内部或外部命令，也不是可运行的程序

    转自VC错误:http://www.vcerror.com/?p=49 问题描述: 错误:'ddkbuild.cmd' 不是内部或外部命令,也不是可运行的程序 解决方法: 详细的解决方法可参考VC错误 ...

  2. iOS开发之UIMenuController

    1.简介 用于剪切.复制.粘贴.选择.选择ALL和DELETE命令的菜单界面. UITextField.UIWebView.UITextView自带有这种UIMenuController效果: 2.相 ...

  3. UVA-10200-Prime Time-判断素数个数（打表预处理）+精度控制

    题意: 给出a.b区间,判断区间内素数所占百分比 思路: 注意提前打表和控制精度1e-8的范围足够用了 细节: 精度的处理 判断素数的方法(且返回值为bool) 数据类型的强制转换 保存素数个数 提前 ...

  4. 剑指offer——08斐波那契数列

    题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0). n<=39 有多种方法,简单的循环.递归.动态规划: class Solutio ...

  5. numpy基本函数

    在学习python的时候常常需要numpy这个库,每次都是用一个查一个,这个,终于见到一个完整的总结了http://blog.csdn.net/blog_empire/article/details/ ...

  6. USACO 2003 Fall Orange Popular Cows /// tarjan缩点 oj22833

    题目大意: n头牛,m个崇拜关系,并且崇拜具有传递性 如果a崇拜b,b崇拜c,则a崇拜c 求最后有几头牛被所有牛崇拜 强连通分量内任意两点都能互达 所以只要强联通分量内有一点是 那么其它点也都会是 按 ...

  7. ARM多核处理器启动过程分析

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qianlong4526888/article/details/27695173 说明: 该流程图依照 ...

  8. Linux 实用指令（10）-RPM和YUM

    目录 RPM 和 YUM 1 rpm 包的管理 1.1 介绍 1.2 rpm包的简单查询指令 1.3 rpm包名基本格式 1.4 rpm包的其他查询指令: 1.5 卸载rpm 包 1.6 安装rpm包 ...

  9. 我也可以独立（引用JS外部文件）

    我也可以独立(引用JS外部文件) 通过前面知识学习,我们知道使用<script>标签在HTML文件中添加JavaScript代码,如图: JavaScript代码只能写在HTML文件中吗? ...

  10. Vue键盘事件

    键盘事件一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...