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. Python基础入门教程，Python学习路线图

    给大家整理的这套python学习路线图,按照此教程一步步的学习来,肯定会对python有更深刻的认识.或许可以喜欢上python这个易学,精简,开源的语言.此套教程,不但有视频教程,还有源码分享,让大 ...

  2. zookeeper初试

    实验环境: os-platform: windows7 x64 jdk: 1.7 参考文档: http://www.ibm.com/developerworks/cn/opensource/os-cn ...

  3. php---tp框架---表单验证

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证.分为静态验证和动态验证. 关于基础知识,请查看手册"自动验证"一章 ...

  4. Java IO在实际项目开发中应用

    IO是java绕不过去的槛,在开发中io无处不在, 正如同 世界上本没有路,java io写多了,也就知道了大体是什么意思,在读完thinking in java 感觉就更清晰了,结合具体的业务场景, ...

  5. Asp.net MVC-3-执行过程

    本篇主要讲述MVC处理请求时创建Controller和执行Action的完整过程. 创建Controller 先查看MvcHandler中处理请求的方法BeginProcessRequest: pro ...

  6. Jenkins-FQA

    1.svn url不能设置成文件路径,而应该是"文件夹"路径,也就是说必须是目录. 示例: Checking out https://svn.gw.com.cn:10000/svn ...

  7. 如何在一个Eclipse同时启动两个Tomcat

    比如:有两个版本的tomcat,一个5.*,一个6.*,此时由于两个工程分别部署在两个版本的tomcat下,需要同时启动两个tomcat,以下是方法: 1.特别要注意: 不要设置CATALINA_HO ...

  8. Luogu 1090 合并果子（贪心，优先队列，STL运用）

    Luogu 1090 合并果子(贪心,优先队列,STL运用) Description 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每 ...

  9. Scala关于软件的安装

    1.安装JDK 因为很多系统都会预装java,所以我们首先要测试Java版本.这里我们要求要在1.8以上.在终端输入java -version来测试版本 Windows 关于Windows,我们首先要 ...

  10. Serv-u Mysql数据库用户

    Serv-u 关联Mysql数据库用户需要用到ODBC数据源,windows不自带支持MySQL.所以要网上下载自己安装 官网下载地址:http://dev.mysql.com/downloads/c ...