在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]的更多相关文章

  1. 属性选择器 [attribute^=value] [attribute~=value] [attribute|=value] [attribute*=value]

    这是css属性选择器的一种:[attribute^=value] ,用来匹配属性值以指定值开头的每个元素.例如: [class^="test"] { background:#fff ...

  2. CSS3初学篇章_3（属性选择符/字体样式/元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  3. jQuery中的属性过滤选择器（四、五）：[attribute] 、[attribute=value]、[attribute!=value] 、[attribute^=value] 等

    <!DOCTYPE html> <html> <head> <title>属性过滤选择器</title> <meta http-equ ...

  4. PropertyGrid—添加属性Tab

    零.引言 PropertyGrid用来显示和编辑对象的属性,前面已经简单介绍了如何使用该控件和提供不同的属性编辑方法.前面主要讲如何使用该控件,但有时,该控件无法满足我们的需求,就需要对其进行扩展.本 ...

  5. 仿京东淘宝商品详情页属性选择js效果

    在网上找了好久发现都不符合要求就自己摸索写了一个,用到了linq.js这个linq to js 扩展,不然用纯JS遍历json查询要死人啊 demo:http://123.207.28.46:8086 ...

  6. CSS3基础(4)——CSS3 渲染属性

    一. CSS3 计数器详解    CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...

  7. 我的Python学习笔记（四）：动态添加属性和方法

    一.动态语言与静态语言 1.1 动态语言 在运行时代码可以根据某些条件改变自身结构 可以在运行时引进新的函数.对象.甚至代码,可以删除已有的函数等其他结构上的变化 常见的动态语言:Object-C.C ...

  8. CSS3 background-size属性兼容

    background-size是CSS3新增的属性,但是IE8以下还是不支持 background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比):background ...

  9. 笔记-python-动态添加属性

    笔记-python-动态添加属性 1.      添加对象/类属性 添加对象属性 class Person(object): def __init__(self, newName, newAge): ...

随机推荐

  1. bridge pattern

     10.5 桥接模式总结 桥接模式是设计Java虚拟机和实现JDBC等驱动程序的核心模式之一,应用较为广泛.在软件开发中如果一个类或一个系统有多个变化维度时,都可以尝试使用桥接模式对其进行设计.桥接模 ...

  2. Java OCR tesseract 图像智能字符识别技术

    公司有需求啊,所以就得研究哈,最近公司需要读验证码,于是就研究起了图像识别,应该就是传说中的(OCR:光学字符识别OCR),下面把今天的收获整理一个给大家做个分享. 本人程序用的tesseract,官 ...

  3. SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  4. Canvas翻转方法

     // 普通抽奖: // ctx.drawImage(img, px, py); // 级别"翻转"帆布 ctx.translate(canvas_width, 0); ctx. ...

  5. oracle db于，一个特定的数据字典pct miss其计算公式

    这篇文章是原创文章,转载请注明出处: http://blog.csdn.net/msdnchina/article/details/38766801 本文提到的数据字典.以dc_histogram_d ...

  6. poj 1466 Girls and Boys （最大独立集）

    链接:poj 1466 题意:有n个学生,每一个学生都和一些人有关系,如今要你找出最大的人数.使得这些人之间没关系 思路:求最大独立集,最大独立集=点数-最大匹配数 分析:建图时应该是一边是男生的点, ...

  7. Hello ASP.NET5

    2015年11月30日, ASP.NET 5 RC1 已经发布,本文尝试了一下ASP.NET5项目的创见一发布到IIS.开发环境,win10 64位,visual studio2015(已更新upda ...

  8. UVa 11587 - Brick Game

    称号:背景:brick game有N块,给你一个整数的定数S,两个人轮流木: 的木块数是集合S中存在的随意数字.取走最后木块的人获胜.无法取则对方获胜. 题干:如今让你先取,给你一个你的结果序列串T, ...

  9. 读书笔记之SQL注入漏洞和SQL调优

    原文:读书笔记之SQL注入漏洞和SQL调优 最近读了程序员的SQL金典这本书,觉得里面的SQL注入漏洞和SQL调优总结得不错,下面简单讨论下SQL注入漏洞和SQL调优. 1. SQL注入漏洞 由于“' ...

  10. Base64编码和解码

    Base64这是一个二进制编码方法转换成可打印字符.主要用于邮件传输. Base64将64人物(A-Z,a-z,0-9,+,/)由于基本字符集.把所有的符号转换成字符集. 编码: 编码每次3节转为4字 ...