[attribute |= value] 与 [attribute ^= value],[attribute ~= value] 与 [attribute *= value] 的联系与区别
[attribute |= value] 与 [attribute ^= value] 的联系与区别:
一、联系:
1. 两个选择器的 attribute 属性值等于 value 时都可以匹配
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
<div class="vue">vuevuevuevue.</div>
div[class^="test"]{
background:#ff0;
}
div[class|="vue"]{
background:#0f0;
}
2. 两个选择器的 attribute 属性值以 value 开头且后面都跟上"-"时都可以匹配
<!-- html 中 class 名改变 -->
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test-test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
<div class="vue-test">vuevuevuevue.</div>
/* css 不变 */
div[class^="test"]{
background:#ffff00;
}
div[class|="vue"]{
background:#00ff00;
}
它们的结果不变:
二、区别:
1. 两个选择器的 attribute 属性值以 value 开头且后面都不跟上"-",而是随意添上其它字母时,[attribute ^= value] 可以匹配,而 [attribute |= value] 不能匹配
<!-- html 中 class 名改变 -->
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="testss">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
<div class="vuess">vuevuevuevue.</div>
/* css 不变 */
div[class^="test"]{
background:#ffff00;
}
div[class|="vue"]{
background:#00ff00;
}
结果也改变:
其它情况下,比如后面添加 "_"等其它符号,和上面一样的结果。
总结:
1. [attribute ^= value] 可以同 attribute 值等于 value,或者 attribute 值以 value 开头后面跟任意字符的情况匹配;
2. [attribute |= value] 可以同 attribute 值等于 value,或者 attribute 值以 value 开头且后面只能紧跟 "-" 字符的情况匹配;
3. 可以说 [attribute |= value] 限定跟严格。只要 [attribute |= value] 能匹配到的情况,[attribute ^= value] 都能匹配到。[attribute |= value] 是 [attribute ^= value] 的"子集"。
[attribute ~= value] 与 [attribute *= value] 的联系与区别:
一、联系:
1. 两个选择器的 attribute 属性值等于 value 时都可以匹配
<div class="test">这是第一个 div 元素。</div>
<div class="second">这是第二个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
div[class*="test"]{
background:#ff0;
}
p[class~="test"]{
background:#0ff;
}
2. 两个选择器的 attribute 属性值包含一个 value 单词时都可以匹配
<!-- html 中 class 名改变 -->
<div class="test ss">这是第一个 div 元素。</div>
<div class="second">这是第二个 div 元素。</div>
<p class="test ss">这是段落中的文本。</p>
/* css 不变 */
div[class*="test"]{
background:#ff0;
}
p[class~="test"]{
background:#0ff;
}
结果也不变:
二、区别:
1. [attribute ~= value] 选择器的 attribute 属性值 value 后面跟上其它的字符时不能匹配;而[attribute *= value] 选择器的 attribute 属性值 value 后面跟上其它的字符时能匹配;
<!-- html 中 class 名改变 -->
<div class="testss">这是第一个 div 元素。</div>
<div class="second">这是第二个 div 元素。</div>
<p class="testss">这是段落中的文本。</p>
/* css 不变 */
div[class*="test"]{
background:#ff0;
}
p[class~="test"]{
background:#0ff;
}
结果改变:
2. 不仅如此,[attribute *= value] 选择器 attribute 的值 value 的在前面或后面添加任意字符都能匹配,只要有 value 这个字符串就行:
<div class="sstestss">这是第一个 div 元素。</div>
<div class="second">这是第二个 div 元素。</div>
<p class="testss">这是段落中的文本。</p>
div[class*="test"]{
background:#ff0;
}
p[class~="test"]{
background:#0ff;
}
总结:
1. [attribute ~= value] 可以同 attribute 值等于 value,或者 attribute 值有 value 这个单词就能匹配;
2. [attribute *= value] 可以同 attribute 值等于 value,或者 attribute 值有 value 这个单词,或者在 attribute 值的前后添加任意字符,只要其中包含 value 这个字符串都能匹配;
3. 可以说 [attribute ~= value] 限定更严格。只要 [attribute ~= value] 能匹配到的情况,[attribute *= value] 都能匹配到。[attribute ~= value] 是 [attribute *= value] 的"子集"。
[attribute |= value] 与 [attribute ^= value],[attribute ~= value] 与 [attribute *= value] 的联系与区别的更多相关文章
- [WARNING] Warning: selected war files include a WEB-INF/web.xml which will be ignored (webxml attribute is missing from war task, or ignoreWebxml attribute is specified as 'true')
WARNING] Warning: selected war files include a WEB-INF/web.xml which will be ignored (webxml attribu ...
- JSP中,EL表达式向session中取出一个attribute和JSP脚本访问session取出一个attribute,写法有何不同?(转自百度知道)
EL表达式使用起来会更简洁,假如session中有一个属性A(attrA),那么EL和jsp脚本取值的方式如下: EL表达式:${ sessionScope.attrA } JSP脚本:<%=s ...
- [C#] 剖析 AssemblyInfo.cs - 了解常用的特性 Attribute
剖析 AssemblyInfo.cs - 了解常用的特性 Attribute [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5944391.html 序 ...
- Unity中使用Attribute
Attribute是c#的语言特性 msdn说明如下: The Attribute class associates predefined system information or user-def ...
- 理解Attribute
注:本文转载自http://kb.cnblogs.com/page/87531/ Attribute与Property 的翻译区别 Attribute 一般译作“特性”,Property 仍然译为“属 ...
- C#基础---Attribute(标签) 和 reflect(反射) 应用
1.Attribute的定义与作用: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Micros ...
- Attribute和自定义Property
property(属性) attribute(特性) property和attribute的同步 id href value class/className 旧IE的趣事 attribute作为DOM ...
- Attribute
Attribute介绍 咱们来说Attribute,他是一个类,所以自定义的Attribute都是继承自System.Attribute,一般命名的时候都是以Attribute结尾.在使用的时候我们可 ...
- 通过声明Attribute属性改变不同类的输出效果
ConsoleApplication--控制台应用程序 首先创建基类: using System; using System.Collections.Generic; using System.Lin ...
- C#学习笔记 -- Attribute
学习参考: http://www.cnblogs.com/dudu/articles/4449.html http://www.cnblogs.com/anytao/archive/2007/04/1 ...
随机推荐
- linux ssh 免密码登录的配置过程
# ssh-keygen -t rsa -C "自定义描述" -f ~/.ssh/自定义生成的rsa文件 # cd ./.ssh # touch config # 粘贴 Host ...
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
- 解决 swap file “*.swp”already exists!问题
用vim编辑文件实际上是先copy一份临时文件,病映射到内存给你编辑,编辑的是临时文件,当执行:w后才保存临时文件到原文件,执行:q后才删除临时文件. 每次启动检索是否有临时文件,有就询问如何处理, ...
- 20个专业H5(HTML5)动画工具推荐
AnimateMate 可能是最好的 Sketch 动画插件.Sketch 目前被广泛应用于 HTML5 的原型界面设计,或者被应用于数据可视化的,动画部分则一般经由软件 Principle 等实现. ...
- laravel5.4学习--laravel基本路由
最基本的 Laravel 路由只接收一个 URI 和一个闭包,并以此提供一个非常简单且优雅的定义路由方法: Route::get('foo', function () {return 'Hello W ...
- ThinkPHP出现项目目录不可写,目录无法自动生成
问题描述:维护一个老项目,用的TP2.1,down完代码,配好环境,访问的时候出现“项目目录不可写,目录无法自动生成!请使用项目生成器或者手动生成项目目录~”: 问题原因:在linux 服务器上,th ...
- 数据集DataSet
ADO.NET数据访问技术的一个突出的特点就是支持离线访问,而实现这种离线访问技术的核心就是DateSet对象,该对象通过将数据驻留在内存来实现离线访问. DataSet对象由一组DataTable对 ...
- PL/SQL之异常
异常分为预定义异常和用户自定义异常.预定义异常是由系统定义的异常.由于他们已在STANDARD包中预定义了,因此,这些预定义异常可以直接在程序中使用,而不用在预定义部分声明.而用户自定义异常则需要在定 ...
- java 基础 --- volatile
问题 : volatile 解决的是什么问题 有什么应用场景 概述 某些共享变量的时候我们使用volatile 修饰,它会保证修改的值立即被更新到主存,或是从主存中获取最新的值.它的底层是如何实现的 ...
- VS设置护眼色
打开vs2013 选项 环境...如图所示