1、[attribute|=value]

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

选择 lang 属性值以 "val" 开头的元素

该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

[attribute|=value]是CSS2选择器，浏览器都支持。

2、 [attribute^=value] 

[attribute^=value]选择器说明：http://www.w3school.com.cn/cssref/selector_attr_begin.asp

[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

 [attribute^=value]是CSS3选择器，但是浏览器也都支持。

总结：2个选择器的区别是[attribute|=value]必须是选取整个单词或者中间有连字符的单词， [attribute^=value] 无此限制！

示例代码：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>[attribute|=value]和[attribute^=value]选择器区别</title>

        <style type="text/css">

            /*3个DIV均起作用*/

            div[class^='test'] {

                color: red;

            }

            /*只有前2个DIV起作用*/

            div[class|='test'] {

                color: green;

            }

        </style>

    </head>

    <body>

        <div class="test">

            555

        </div>

        <div class="test-test">

            666

        </div>

        <div class="test2">

            666

        </div>

    </body>

</html>

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

  1. CSS选择器[attribute | = value] 和 [attribute ^ = value]的区别

    前言 首先你需要知道[attribute | = value] 和 [attribute ^ = value] 分别是什么? ①:[attribute | = value] ②:[attribute ...

  2. [attribute |= value] 与 [attribute ^= value]，[attribute ~= value] 与 [attribute *= value] 的联系与区别

    [attribute |= value] 与 [attribute ^= value] 的联系与区别: 一.联系: 1. 两个选择器的 attribute 属性值等于 value 时都可以匹配 < ...

  3. CSS3添加属性选择： [attribute*=value] 、[attribute^=value] 和[attribute$=value]

    在CSS3新的 [attribute*=value] .[attribute^=value] 和[attribute$=value] 三个选择.使得属性选择使用通配符概念. 下面是利用这三个属性样本代 ...

  4. jQuery中first-child与first选择器区别

    1.first-child first-child为每个父级元素匹配第一个子元素,可以匹配出多个元素: 示例代码: <!DOCTYPE html> <html lang=" ...

  5. jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

    <!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...

  6. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  7. 理解Spring MVC Model Attribute和Session Attribute

    作为一名 Java Web 应用开发者,你已经快速学习了 request(HttpServletRequest)和 session(HttpSession)作用域.在设计和构建 Java Web 应用 ...

  8. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. Java 泛型在实际开发中的应用

    java泛型是对Java语言的类型系统的一种扩展,泛型的本质就是将所操作的数据类型参数化.下面我会由浅入深地介绍Java的泛型. 一:泛型出现的背景 在java代码里,你会经常发现类似下边的代码: p ...

  2. virtualbox 安装centos系统，设置双网卡实现虚拟机上网及主宿互访

    写在前面:前两天想玩linux,在VMware中装了centos,进入系统后发现连不上网,搜了下教程,/etc/sysconfig/network-scripts/目录下没有 ifcfg-e*的文件 ...

  3. Java 9 揭秘（12. Process API 更新）

    Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: Process API是什么 如何创建本地进程 如何获取新进程的信息 如何获取当前进程的信息 如何获取所有系统进程的信息 如何设置创建,查 ...

  4. js数组拍平

    js数组拍平 var arr=[1,[[[7,2],8,9],3]]; function f(arr) { if (Object.prototype.toString.call(arr) != &qu ...

  5. Android - 使用Volley请求网络数据

    Android - 使用Volley请求网络数据 Android L : Android Studio 14 个人使用volley的小记,简述使用方法,不涉及volley源码 准备工作 导入Volle ...

  6. 中国(北方)大学生程序设计训练赛(第一周) （D E）

    比赛链接 D题是个二分,每次check复杂度为O(n),类似于xdu_1068,只是一个是求积,一个是求商 #include<bits/stdc++.h> using namespace ...

  7. JavaScript 学习推荐

    主要是个人的学习网站,书籍推荐,还有个人学习经历,以及一些学习经验或技巧 JavaScript学习网站推荐 如果想快速入门,这些是很推荐的网站      快速入门,很快能让你了解前端,有什么,做什么, ...

  8. 天地图使用过程中由于display:none导致加载部分地图瓦片失败

    在为按钮添加点击事件让地图显示的时候,初始加载未加载到当前页面尺寸的所有地图瓦片,在display:none之后停止加载地图,所以display:none属性去掉,改为dom解析完成之后$('#map ...

  9. Ubuntu16.04配置Mac主题

    作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7072878.html 觉得有帮助?欢迎来打赏 Ubuntu配置Mac主题 下 ...

  10. SQL Server Alwayson创建代理作业注意事项

    介绍 Always On 可用性组活动辅助功能包括支持在辅助副本上执行备份操作. 备份操作可能会给 I/O 和 CPU 带来很大的压力(使用备份压缩). 将备份负荷转移到已同步或正在同步的辅助副本后, ...