前言

　　　　首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么？

　　　　①：[attribute | = value]

　　　　②：[attribute ^ = value]

　 使用场景（下面我用获取input为例，逐步描述何时使用[attribute | = value] 和 [attribute ^ = value]）

　　　　①：type相同，name不同，没有class（获取type即可，$("input[type=text]")）

　　　　 <input type="text" name="mary1" placeholder="mary" />

        <input type="text" name="mary2" placeholder="mary" />

        <input type="text" name="mary3" placeholder="mary" />

　　　　②：type不同，name相同，没有class（获取name即可，$("input[name=tom]")）

　　　　 <input type="month" name="tom" placeholder="tom" />

        <input type="number" name="tom" placeholder="tom" />

        <input type="text" name="tom" placeholder="tom" />

　　　　③：type不同，name不同，没有class（通过[attribute|=value] 获取name，$("input[name|=kevin")）

　　　　 <input type="month" name="kevin-1" placeholder="kevin" />

        <input type="number" name="kevin-2" placeholder="kevin" />

        <input type="text" name="kevin-3" placeholder="kevin" />

　　　　④：type不同，name不同且name值没有'-'，没有class（通过[attribute ^ = value]获取name，$("input[name^=bob")）

　　　　 <input type="month" name="bob1" placeholder="bob"  />

        <input type="number" name="bob2" placeholder="bob"  />

        <input type="text" name="bob3" placeholder="bob"  />

　　完整示例demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

        <title></title>

        <style>

            .tutu1 {

                margin: 20px;

                border: 2px solid red;

            }

            .tutu2 {

                margin: 20px;

                border: 2px solid blue;

            }

            .tutu3 {

                margin: 20px;

                border: 2px solid green;

            }

            .tutu4 {

                margin: 20px;

                border: 2px solid rosybrown;

            }

        </style>

    </head>

    <body>

        <!-- type相同，name不同，没有class -->

        <input type="text" name="mary1" placeholder="mary" />

        <input type="text" name="mary2" placeholder="mary" />

        <input type="text" name="mary3" placeholder="mary" />

        <hr />

        <!-- type不同，name相同，没有class -->

        <input type="month" name="tom" placeholder="tom" />

        <input type="number" name="tom" placeholder="tom" />

        <input type="text" name="tom" placeholder="tom" />

        <hr />

        <!-- type不同，name不同，没有class -->

        <input type="month" name="kevin-1" placeholder="kevin" />

        <input type="number" name="kevin-2" placeholder="kevin" />

        <input type="text" name="kevin-3" placeholder="kevin" />

        <hr />

        <!-- type不同，name不同且name值没有'-'，没有class -->

        <input type="month" name="bob1" placeholder="bob"  />

        <input type="number" name="bob2" placeholder="bob"  />

        <input type="text" name="bob3" placeholder="bob"  />

        <hr />

        <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>

        <script>

            $(function() {

                $("input[type=text]").addClass("tutu1");

            });

            $(function() {

                $("input[name=tom]").addClass("tutu2");

            });

            $(function() {

                $("input[name|=kevin").addClass("tutu3");

            });

            $(function() {

                $("input[name^=bob").addClass("tutu4");

            });

        </script>

    </body>

</html>

　　结论：

　　　　　　

　　　　　　  参考原文

CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别的更多相关文章

  1. html5 css选择器。 井号，句号的区别

    .理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

  2. CSS选择器div和p的用法和区别

    div,p.div p.div>p.div+p.div~p.div.a的用法和区别 div,p:选择所有<div>元素和<p>元素 <style> p,spa ...

  3. [attribute|=value]和[attribute^=value]选择器区别

    1.[attribute|=value] [attribute|=value]选择器说明:http://www.w3school.com.cn/cssref/selector_attribute_va ...

  4. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  5. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  6. CSS选择器的一些记录

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  7. 精通 CSS 选择器

    CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素,因此作为前端开发需要熟练掌握.下面是一些常用的 CSS 选择器示例. 元素选择器 E, ...

  8. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  9. CSS 选择器汇总

    CSS 选择器 CSS 元素选择器 CSS 选择器分组 CSS 类选择器详解 CSS ID 选择器详解 CSS 属性选择器详解 CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器 CSS ...

随机推荐

  1. Linux安全加固及文本处理之awk实践

    1.编写脚本selinux.sh,实现开启或禁用SELinux功能 [root@ansible_centos7 ~]# cat selinux.sh #!/bin/bash # #********** ...

  2. 黄聪：wordpress登录后台后load-scripts.php载入缓慢

    今天一个微信群里一个好友问大鸟,他的wordpess后台载入非常缓慢,缓慢到什么程度,我们看图: 这个真的是超级慢了,这类问题怎么解决呢,我们登录后台后,按下F12打开控制台,接着点击network, ...

  3. RabbitMQ的安装与使用（Centos7，linux版本）

    1.主流的消息中间件简单介绍哦. 1).ActiveMQ是Apache出品,最流行的,能力强劲的开源消息总线,并且它一个完全支持jms(java message service)规范的消息中间件.其丰 ...

  4. python基础(13):函数名的使用、第一类对象、闭包、迭代器

    1. 函数名的运用 函数名是⼀个变量,但它是⼀个特殊的变量,与括号配合可以执⾏函数的变量. 1.1 函数名的内存地址 def func(): print("呵呵") print(f ...

  5. Dynamics 365本地部署版本配置OAuth 2 Password Grant以调用Web API

    微软动态CRM专家罗勇 ,回复330或者20190504可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 根据官方建议,不要再使用Dynamics 365 Custome ...

  6. 【转载】不可不知的 Android strings.xml 那些事

    相信 strings.xml 已经是大家在 Android 开发中最熟悉的文件之一了,但其实它也有很多需要注意的地方和一些小技巧,知道了这些可以让你的 Android 应用更加规范易用,大家来看看吧. ...

  7. iOS10 新特性一

    链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是 ...

  8. JavaScript—数据可视化（ECharts）

    Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 官网下载地址:https://echarts.baidu.com/index.html 2.Echarts引用案例—柱 ...

  9. 01-CSS3-justify-content: space-around; justify-content: space-between;

    /* justify-content: space-around; 运用在父级元素上 第一个子元素距离左边的距离==最后一个子元素距离右边的距离 除第一个子元素和最后一个子元素外,第2个,第3个... ...

  10. 29.Java基础_接口

    接口的成员特点