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. Unity3D中使用BMFont制作图片字体 （NGUI版）

    [旧博客转移 - 发布于2015年9月10日 16:07] 有时美术会出这种图片格式的文字,NGUI提供了UIFont来支持BMFont导出的图片字体 BMFont原理其实很简单,首先会把文字小图拼成 ...

  2. Android系统--输入系统（十三）Dispatcher线程情景分析_Reader线程传递事件

    Android系统--输入系统(十三)Dispatcher线程情景分析_Reader线程传递事件 1. 输入按键 我们知道Android系统的按键分为三类:(1)Global Key;(2)Syste ...

  3. 学习笔记TF027:卷积神经网络

    卷积神经网络(Convolutional Neural Network,CNN),可以解决图像识别.时间序列信息问题.深度学习之前,借助SIFT.HoG等算法提取特征,集合SVM等机器学习算法识别图像 ...

  4. Ajax的方法和使用代码

    //1.创建Ajax对象,已经封装好的函数: function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ re ...

  5. 设计模式--工厂方法模式（Factory method pattern）及应用

    面向对象的好处: 通过封装,继承,多态把程序的耦合度降低. 用设计模式可以使程序更加灵活,容易修改,且易于复用. 1. 工厂方法模式 Define an interface for creating ...

  6. (转)springMVC框架下JQuery传递并解析Json数据

    springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...

  7. EF 中 Code First 的数据迁移以及创建视图

    写在前面: EF 中 Code First 的数据迁移网上有很多资料,我这份并没什么特别.Code First 创建视图网上也有很多资料,但好像很麻烦,而且亲测好像是无效的方法(可能是我太笨,没搞成功 ...

  8. keilc 4 编译出现的几个错误…

    原文地址:keilc 4 编译出现的几个错误解决作者:黑子     今天安装了keilc4,因为项目用到,所以把遇到的几个编译错误解决方法说说,第一次写东西不知道写啥!!    一  第一个是错误提示 ...

  9. 如何关闭浏览器的HSTS功能

    在安装配置 SSL 证书时,可以使用一种能使数据传输更加安全的Web安全协议,即在服务器端上开启 HSTS (HTTP Strict Transport Security).它告诉浏览器只能通过HTT ...

  10. Spring初始化ApplicationContext线程托管实际运用架构构思

    今天我分享一个技术点,利用Spring初始化+线程接管进行程序启动后保持会话状态. 先来一段@test单元测试注解,后台开发的很熟悉,这是测试局部代码用的: @RunWith(SpringJUnit4 ...