在 CSS3 中，追加了三个属性选择器分别为：

[att*=val] ----内容包含

[att^=val] ----开头匹配

[att$=val] ----结尾匹配

示例：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

   <style>

       [id*=box]{

           background: #75d8ff;

       }

       [id^=box]{

           background: #ff0000;

       }

       [id$=blue]{

           background: blue;

       }

   </style>

</head>

<body>

实例1:

    <div id="box1">sdf</div>

    <div id="2box">sdf</div>

    <div id="box3blue">sdf</div>

</body>

</html>

CSS3通配符的更多相关文章

  1. CSS3属性选择通配符

    CSS3增加了更多的CSS选择器,可以实现更简单但是更强大的功能,比如:nth-child()等. Attribute selectors:在属性中可以加入通配符,包括^,$,* [att^=val] ...

  2. 神通广大的CSS3选择器

    每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分.但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的 ...

  3. CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  4. CSS3选择器——基本选择器

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

  5. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  6. 十天精通CSS3学习笔记 part2

    第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...

  7. CSS3与页面布局学习笔记（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...

  8. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  9. 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

随机推荐

  1. Powershell下设置环境变量

    NODE中经常会用到process.env.NODE_ENV来判断当前环境,因为使用的系统是windows,在sublime text下安装terminal插件后,默认启动的时Powershell, ...

  2. 测试web数据库的分布式事务atomikos 的三种数据源 SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSourceBean

    这2天学习了atomikos事务控制框架,其中看到有3种数据源,分别是,SimpleDataSourceBean,AtomikosDataSourceBean,AtomikosNonXADataSou ...

  3. 随机的30道四则运算题（简单的c）

    #include <stdio.h>#include <stdlib.h>#include <time.h> int main(void){ int i = 0; ...

  4. 封装insertAfter、addClass、格式化时间

    insertAfter,在JS节点操作中,并没有insertAfter方法,因此需要重新封装 function insertAfter(newEle,targetNode) { var oParent ...

  5. 微软Hololens学院教程-Hologram 220-空间声音（Spatial sound ）【本文是老版本，与最新的微软教程有出入】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦! 原文链接https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  6. FushionCharts Free 的运用[2D/3D图表处理]

    由于先前在一些论坛中谈论到这个插件的运用,留了一些QQ联系方式,最近老是被一些程序员“骚扰”,说是请教一些关于FushionChart Free图表的处理技术,先前还是比较乐意接受的,但发现后来一些完 ...

  7. 基于word制作网站webhelp

    处理问题描述:现在我有个javaweb项目,需要在portal上面点击help即可打开: 当前搜索百度(谷歌不能用了),没有找到更好的解决方案,自己想了个比较简单实用的方法,仅供参考: 设计原理:利用 ...

  8. perl随记(1)

    chmod 755 test,改变文件权限,rwx 421 chomp,如果字符串结尾有换行符,chomp 可以去掉它 正则表达式量词:*表示有或无,+表示1或多,?表示0或1 my,局部变量,只在定 ...

  9. it小小鸟心得

    本来打算就这么浑浑噩噩的过完我的大学四年生涯,但当我读完这本书,改变了我的想法.许多人说大学是最美好的,确实,在这里,我每天都不用认真听讲,不用准时去上课,可是久而久之,自己有感而发觉得这样碌碌无为下 ...

  10. Poj 1222 EXTENDED LIGHTS OUT

    题目大意:给你一个5*6的格子,每个格子中有灯(亮着1,暗着0),每次你可以把一个暗的点亮(或者亮的熄灭)然后它上下左右的灯也会跟着变化.最后让你把所有的灯熄灭,问你应该改变哪些灯. 首先我们可以发现 ...