CSS3添加属性选择： [attribute*=value] 、[attribute^=value] 和[attribute$=value]
在CSS3新的 [attribute*=value] 、[attribute^=value] 和[attribute$=value] 三个选择。使得属性选择使用通配符概念。
下面是利用这三个属性样本代码的一个完整的示范。而且页面显示执行后的效果：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
[id *= irs] {
background-color: red;
}
[id ^= sec] {
background-color: blue;
}
[id $= ird] {
background-color: green;
}
</style>
</head>
<body> <div id="first">第一个 div 元素。 (*= 部分匹配)</div>
<div id="second">第二个 div 元素。(^= 开头匹配)</div>
<div id="third">第三个 div 元素。($= 结尾匹配)</div> </body>
</html>
浏览器中执行效果展示：
下边以这个样例说明CSS3属性选择器。
1. 部分匹配：[attribute*=value] 属性选择器
[attribute *= value] 属性选择器含义是：选择attribute属性中含有value字符串的HTML元素。
上边样例中[id *= irs]，attribute就是id，value就是irs。这样就是要选择id属性中含有“irs”字符串的元素，即第一个div元素。并将这个元素的背景色设置为红色。
2.开头匹配： [attribute^=value] 属性选择器
[attribute ^= value] 属性选择器含义是：选择attribute属性中以value字符串开头的HTML元素。
上边样例中[id ^= sec]，attribute就是id，value就是sec，这样就是要选择id属性中以“sec”字符串开头的元素，即第二个div元素。并将这个元素的背景色设置为蓝色。
3. 结尾匹配：[attribute$=value] 属性选择器
[attribute $= value] 属性选择器意：选择attribute属性为value字符串的结束HTML元件。
热门色板[id $= ird]，attribute那是，id。value那是，ird，这是选择id属性为“ird”字符串元素结束，这第三div元件。与此元件的背景颜色设置为绿色。
CSS3添加属性选择： [attribute*=value] 、[attribute^=value] 和[attribute$=value]的更多相关文章
- 属性选择器 [attribute^=value] [attribute~=value] [attribute|=value] [attribute*=value]
这是css属性选择器的一种:[attribute^=value] ,用来匹配属性值以指定值开头的每个元素.例如: [class^="test"] { background:#fff ...
- CSS3初学篇章_3（属性选择符/字体样式/元素样式）
属性选择符 选择符 说明 E[att] 选择具有att属性的E元素. E[att="val"] 选择具有att属性且属性值等于val的E元素. E[att~=&quo ...
- jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等
<!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...
- PropertyGrid—添加属性Tab
零.引言 PropertyGrid用来显示和编辑对象的属性,前面已经简单介绍了如何使用该控件和提供不同的属性编辑方法.前面主要讲如何使用该控件,但有时,该控件无法满足我们的需求,就需要对其进行扩展.本 ...
- 仿京东淘宝商品详情页属性选择js效果
在网上找了好久发现都不符合要求就自己摸索写了一个,用到了linq.js这个linq to js 扩展,不然用纯JS遍历json查询要死人啊 demo:http://123.207.28.46:8086 ...
- CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
- 我的Python学习笔记（四）：动态添加属性和方法
一.动态语言与静态语言 1.1 动态语言 在运行时代码可以根据某些条件改变自身结构 可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化 常见的动态语言:Object-C.C ...
- CSS3 background-size属性兼容
background-size是CSS3新增的属性,但是IE8以下还是不支持 background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比):background ...
- 笔记-python-动态添加属性
笔记-python-动态添加属性 1. 添加对象/类属性 添加对象属性 class Person(object): def __init__(self, newName, newAge): ...
随机推荐
- Oracle数据库的锁类型
Oracle数据库的锁类型 博客分类: oracle Oracle数据库的锁类型 根据保护的对象不同,Oracle数据库锁可以分为以下几大类:DML锁(data locks,数据锁),用于保护 ...
- 【原创】poj ----- 1182 食物链 解题报告
题目地址: http://poj.org/problem?id=1182 题目内容: 食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submi ...
- 这么多的技术，作为一个freshman，什么研究？
科学技术,从哪里学习? 杨问了我几个最近:"如何学习技术?".说实话,其实,我自己只是一个资深兄弟.对于这个答案.这是更难以在本身回答. 可是.既然比师弟们多吃了几年 ...
- 标准I/O缓冲：全缓冲、行缓冲、无缓冲
说明:我仅仅对网络资源进行了整合,方便学习-.- 基于流的操作终于会调用read或者write函数进行I/O操作.为了使程序的执行效率最高,流对象一般会提供缓冲区,以降低调用系统I/O库函数的次数. ...
- Android 动画具体解释View动画
为了让用户更舒适的在某些情况下,利用动画是那么非常有必要的.Android在3.0一旦支持两种动画Tween动漫Frame动画.Tween动画支持简单的平移,缩放,旋转,渐变.Frame动画就像Gif ...
- 非正确使用浮点数据由项目产生BUG讨论的问题
乘分配 当小学学会了乘法分配.详细乘法分配:并与多个两个数相乘的,他们能够把这个数字乘以,然后加入.由于一个恒定.乘法分配律也能够使用表达式的定义"(a+b)×c = a×c+b×c&quo ...
- ORA-12012: error on auto execute of job "ORACLE_OCM
ALERT日志中报错例如以下: Sun Mar 30 06:05:40 2014 Errors in file /oracle/app/oracle/diag/rdbms/zscims/zscims1 ...
- Linux C编程语言学习材料
C语言作为最基础的编程语言,30年虚弱的患病率. 无论是准备做 PHP/Java/Python/Golang 开发学习.C语言都是基础的,我们非常多基础非常小的互联网执行的开源软件服务都是C语言构筑, ...
- 大约C++ const 全面总结
C++中的const关键字的使用方法很灵活,而使用const将大大改善程序的健壮性,本人依据各方面查到的资料进行总结例如以下,期望对朋友们有所帮助. Const 是C++中经常使用的类型修饰符,常类型 ...
- 【DataStructure】Some useful methods about linkedList(三)
Method 4: Gets the value of element number i For example, if list is {22, 33, 44, 55, 66, 77, 88, 99 ...