css3新增的属性选择器
使用css选择器，可以实现一个样式对应多个html文档的元素，在｛｝前面的部分就是“选择器”，指明了样式的作用对象。
在CSS中追加了三个属性选择器：[att*=val]、[att^=val]和[att$=val]
id="top" att就是id,类似的如class,href~~等属性。
[att*=val]属性选择器
如果元素att属性的属性值中包含val指定的字符，那么该元素使用这个样式。
[att^=val]属性选择器
如果att属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个样式。
[att$=val]属性选择器
如果元素的att属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
[id*=po]{background-color: pink;}
[id^=bo]{background-color: cadetblue;}
[id$=\-1]{background-color: lightblue}
a[href$=jpg]:after{
content:"this is a picture!";
background-color:lightcoral;
}
</style>
</head>
<body>
<div id="poop">poop [id*=po]</div><!--只要有含po就就生效-->
<div id="ppop">ppop [id*=po]</div> <div id="bo">bo [id^=bo]</div><!--要开头是bo才生效-->
<div id="bbo">bbbo [id^=bo]</div> <div id="co-1">[id$=\-1] co-1</div><!--末尾为-1生效，\为转义-->
<div id="co-2">[id$=\-1] co-2</div> <a href="1.jpg">a[href$=jpg]：</a>
</body>
</html>
效果如下：
css3新增的属性选择器的更多相关文章
- CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3新增的属性有哪些
徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- CSS3新增的属性有哪些：
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- css3新增的属性 - 分享
CSS3新增属性 一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...
- css3新增文本属性
css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...
- 晨读笔记：CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- css3系列之属性选择器
Attribute Selectors(属性选择器) E[attr ~="val"] E[attr |="val"] E[attr ^="val&qu ...
随机推荐
- jqzoom与scrollpic配合的问题
<script type="text/javascript"> //以下两个方法的执行顺序不能互换,否则zoom方法的单击缩略图事件会失效 if (document.a ...
- Scala的下一步
第七步:带类型的参数化数组 Scala里可以使用new实例化对象或类实例.当你在Scala里实例化对象,可以使用值和类型把它参数化:parameterize.参数化的意思是在你创建实例的时候“设置”它 ...
- sqlserver 2008 孤立用户解决方法
从别一台服务器上得到一个数据库备份.还原到本地,数据库中的用户无法登录,也就是联机帮助中说的还原备份可能产生的孤立用户问题. 一.新建一个 MyDataBase 数据库 二.把备份文件放到 C 盘根目 ...
- shared_ptr：资源管理利器
如果你还在使用传统的C++,那么可以肯定堆内存的管理让你头痛过!在传统的C++领域,堆内存管理上我们能借用的现成工具就只有auto_ptr.但是很不幸用auto_ptr管理堆内存简直就是个错误.aut ...
- 安装lnmp一键安装包（转）
系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要3GB以上硬盘剩余空间 128M以上内存,Xen的需要有SWAP,OpenVZ的另外 ...
- 涵涵和爸爸习惯养成进度表（二）(May 30 - )
规则说明 22天内,没有哭脸,不超过三个无表情脸,可以给一个奖励(动画书等) 涵涵违反规则,在爸爸和妈妈都同意的情况下,可以给无表情脸 爸爸违反规则,在妈妈和涵涵都同意的情况下,可以给无表情脸 获奖记 ...
- 调试 zeromq 发现 accept 死循环
起因:在群里一个同学说使用 zeromq 的时候出了点儿问题,问题描述如下“router连接十几万客户端后,然后把router杀死,重启,这时候zeromq的某个线程99%的cpu,卡死了,再也接受不 ...
- HTTP协议用的TCP但是只建立单向连接
作者:IronTech链接:https://www.zhihu.com/question/20085992/answer/71742030来源:知乎著作权归作者所有,转载请联系作者获得授权. 下面的解 ...
- JS中offsetwidth等图文解释
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
- Math.abs(~2018)，掌握规律即可！
Math.abs(~2018) 某前端群的入门问题长姿势了,一个简单的入门问题却引发了我的思考,深深的体会到自己在学习前端技术的同时忽略遗忘了一些计算机的基础知识. 对于 JS Math对象没什么可说 ...