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. SpringEL 表达式错误记录

    原因暂时未知....

  2. 使用 electron 做个播放器

    使用 electron 做个播放器 本文同步更新在:https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了,但是最近才玩了一 ...

  3. Java Jpa 规范

    Jpa最早是EJB3.0里面的内容,JSR 220: Enterprise JavaBeansTM 3.0 https://www.jcp.org/en/jsr/detail?id=220 后来大约在 ...

  4. Python基础之内置函数和递归

    一.内置函数 下面简单介绍几个: 1.abs() 求绝对值 2.all() 如果 iterable 的所有元素都为真(或者如果可迭代为空),则返回 True 3.any() 如果 iterable 的 ...

  5. 【Log4j】分包，分等级记录日志信息

    在开发中我们经常会将不同包下的日志信息在不同的地方输出,以便于以后出问题能够直接在对应的文件中找到对应的信息! 例如:在spring+SpringMVC+mybatis的框架中,我们经常会将sprin ...

  6. 给ubuntu的swap分区增加容量

    1.创建一个 Swap 文件. mkdir swap cd swap sudo dd if=/dev/zero of=swapfile bs=1024 count=100000 出现下列提示,上面命令 ...

  7. centos 7 下面安装oracle 11g r2 过程分享

    本人对LINUX等很多还不熟悉,如果有不对的地方还请各位指正.谢谢. 打算学习下ORACLE,RMAN备份与还原功能,所以安装了虚拟机,用的是centos7 X86_64-1611版本,oracle用 ...

  8. year：2017 month：08 day：04

    2017-08-04 JAVAse 1.final修饰符 final可以修饰类,成员方法,成员变量(static 修饰符不可以修饰类) final的初始化在对象被实例化前即可final 修饰的方法不可 ...

  9. 最短路之Bellman-Ford算法

    说明: Dijkstra算法是处理单源最短路径的有效算法,但它局限于边的权值非负的情况,若图中出现权值为负的边,Dijkstra算法就会失效,求出的最短路径就可能是错的. 这时候,就需要使用其他的算法 ...

  10. Base：一种 Acid 的替代方案

    原文链接: BASE: An Acid Alternative 数据库 ACID,都不陌生:原子性.一致性.隔离性和持久性,这在单台服务器就能搞定的时代,很容易实现,但是到了现在,面对如此庞大的访问量 ...