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 ...
随机推荐
- 【转】修改LINUX时间
命令格式为: date -s 时间字符串 例如只修改系统的日期,不修改时间(时分秒) date -s 2012-08-02 或只修改时间不修改日期 date -s 10:08:00 当然也可以同时修改 ...
- redhat 安装 jdk1.7 问题
redhat 安装 jdk 后出现 dl failure on line 685Error: failed /usr/local/jdk1.6.0_10/jre/lib/i386/client/lib ...
- Perl技巧
项目里面一直用的是Perl,Perl里有各种小技巧就分享在这吧. push(@a, $b) 把b元素压入a数组中, 还可以有 push(@a, [@b]); 那a就成了二维数组了 scalar(@a) ...
- Python开发入门与实战15-IIS部署
15. IIS部署 前面的章节我们完成了基本的业务功能的开发,本章节我们来说说python django项目如何部署到实际的运行环境,完成开发系统的发布工作. Python Django 项目部署发布 ...
- php 数据库备份、还原
1. mydb.php //DB类 2. backup.php //备份脚本 3. restore.php //还原脚本 mydb.php <? class db{ var $linkid; v ...
- Java Swing 第03记 布局管理器
几种Swing常用的布局管理器 BorderLaout 它将容器分为5个部分,即东.南.西.北.中,每一个区域可以容纳一个组件,使用的时候也是通过BorderLayout中5个方位常量来确定组件所在的 ...
- xamarin for android 生成时“java.exe已退出 代码为1”
Xamarin Studio中创建了一个Android Application 运行时出现错误:C:\Program Files\MSBuild\Xamarin\Android\Xamarin.And ...
- shader forge卡通渲染！
自从用了shader forge,妈妈我再也不写shader了...... 写了3种,分别用的顶点法线.法线贴图.顶点法线+法线贴图,然后还有自发光和受光两种模式,那就是6种了吧... 最后来一张sh ...
- NOIP 考前 高斯消元练习
POJ 1830 列出n个方程右边为最后的情况 每一行代表第几个灯的情况,每一行代表是否按第几个按钮写出方程即可. #include <cstdio> #include <cstri ...
- actionscript 截图功能实现
由于截图访问的是 外部 rtmp直播流 所以调用BitmapData.draw时 控制台报以下错误: SecurityError: Error #2123: 安全沙箱冲突:BitmapData.dra ...