使用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新增的属性选择器的更多相关文章

  1. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3新增的属性有哪些

    徐先森讲web CSS3新增的属性有哪些: CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: b ...

  3. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  4. CSS3新增的属性有哪些：

    CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...

  5. css3新增的属性 - 分享

    CSS3新增属性   一.transform变换效果 CSS3 提供了元素变形效果,也叫做变换.它可以将元素实现旋转.缩放和平移的功能. 属性有两个:transform 和 transform-ori ...

  6. css3新增文本属性

    css3新增属性 边框属性 背景属性 文本属性 颜色属性 文本属性 属性 说明 text-shadow 为文字添加阴影 box-shadow 在元素的框架上添加阴影效果 text-overflow 确 ...

  7. 晨读笔记：CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  8. CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  9. css3系列之属性选择器

    Attribute Selectors(属性选择器) E[attr ~="val"] E[attr |="val"] E[attr ^="val&qu ...

随机推荐

  1. 如何在ashx页面获取Session值

    [转]   在一般事务处理页面,可以轻松的得到 Request,Response对象,从而进行相应的操作,如下: HttpRequest Request = context.Request; Http ...

  2. AngularJs项目实践总结

    今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一．UI控件选择 Angularjs是不缺控件的,Github里现 ...

  3. AspNetPager控件分页使用方法

    AspNetPager控件官方下载地址:http://www.webdiyer.com/aspnetpager/ 把控件加到项目中(添加自定义控件的方法),并把它拖放到页面上 <asp:Scri ...

  4. js⑦

    立即执行函数or自执行函数 为了避免全局变量的产生.(function(){ //var a = 10; //var b = 20;//console.log(a,b); -------------v ...

  5. excel 转换日期

    早上一朋友问我excel中如何将类似这样“19850421”的文本日期转换为“1985-04-21”.我的第一反应就是直接设置单元格格式为日期,于是打开excel试了试结果显示“########### ...

  6. Android --AsyncTask异步任务（一）

    1.为什么要异步任务 Android单线程模式 耗时操作放在非主线程(UI线程)中执行 我们都知道Android是单线程模式,只有主线程才能对UI操作,简称UI线程.当然这样的好处是:保证UI的稳定性 ...

  7. 详细讲解Linux驱动程序

    一  编写Linux驱动程序 1.建立Linux驱动骨架 Linux内核在使用驱动时需要装载与卸载驱动 装载驱动:建立设备文件.分配内存地址空间等:module_init 函数处理驱动初始化 卸载驱动 ...

  8. .NET3.5项目转.NET2.0项目技巧

    最近有一个项目,一开始开发是用VS2008(.NET3.5)开发的,该项目是一个Windorm客户端软件,由于在大规模的推广过程中,发现在安装.NET3.5Framework的时候浪费了太多时间,而且 ...

  9. [转]XSS现代WAF规则探测及绕过技术

    初始测试 1.使用无害的payload,类似<b>,<i>,<u>观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过滤<>等等: 2.如果 ...

  10. vs2010无可用源

    全选CPP文件内容,选择 “编辑”-“高级”-“设置选定内容的格式”,保存,重新编译. 当然这种方法是不能完全解决这个问题的奥,你需要在菜单栏的生成里面找到重新生成解决方案,重新生成解决方案试一下啦, ...