在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。

在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:

 实例展示:

html代码

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css代码

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

结果显示:

【CSS3】---属性选择器的更多相关文章

  1. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  2. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  3. css3属性选择器总结

    前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...

  4. css3 -- 属性选择器

    属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...

  5. 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可:    div[class] 2.E[attr=val] 表示属性值完全等于val:   ...

  6. css3属性选择器

  7. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  8. CSS3选择器(二)之属性选择器

    CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...

  9. CSS2属性选择器和css3选择器的用法和区别

    兄弟们,这是我第一次写博客,希望对进来的人有用,写的不好别喷哈,谢谢. css2属性选择器: 1.[attribute] 例子:   [title] 解释:   选择含有  title  属性的所有元 ...

  10. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

随机推荐

  1. c#委托把方法当成参数

    //定义委托,它定义了可以代表的方法的类型 public delegate void GreetingDelegate(string name); /// <summary> /// 用英 ...

  2. C# 操作数据库就的那点代码

    操作数据库的那点代码,别在费劲每个数据库都写一遍SQLHelper,SQLiteHelper,OleDbHelper,了,这里都有了. 接口不发了,自己抽取定义就行了. public abstract ...

  3. [Angular 2] Select From Multiple Nested Angular 2 Elements

    You have complete control over the elements you nest inside of your component instance by using sele ...

  4. 商户怎样选择商业wifi进行移动营销

    互联网移动营销的大潮席卷而来,带给很多其它的商户营销理念上的升级和更新.商业wifi营销成为很多其它的商户选择.以往,人们在咖啡店不过聊聊天喝喝咖啡,如今,人们能够更悠闲的歇息娱乐享受带有wifi的咖 ...

  5. oc-21-class对象

    /** 什么是类对象(Class对象)? 类在内存当中也是以对象形式进行存储的. 1.类对象的类型:Class类型 2.如何创建类对象: 1)Class 类对象名 = [类名 class]; 2)类名 ...

  6. 堆排序-C语言实现

    堆排序 堆排序是利用堆的性质进行的一种选择排序.下面先讨论一下堆. 1.堆 堆实际上是一棵完全二叉树,其任何一非叶节点满足性质: Key[i]<=key[2i+1]&&Key[i ...

  7. 配置apache虚拟主机的实例总结

    如何实现apache虚拟主机配置. 1.基于ip地址的虚拟主机Listen 80<VirtualHost 172.20.30.40> DocumentRoot /home/httpd/ht ...

  8. c#如何在win7下设置IE代理的完美解决方案

    有人还发现:在window7下, 在一个进程中, 设置和取消不能都执行,---- 要么设置,要么取消. 但如果第一次运行时,只进行设置代理,退出后再进运行,只进行取消,这是没有问题的.  简单说说中医 ...

  9. mysql主从复制 主从配置(windows系统上)

    OS:Windows7 DB:MYSQL5.6.2 1.正常安装第一个mysql(安装步骤省略)  2.在控制面板里停止第一个mysql服务  3.将C:\Program Files\MySQL目录下 ...

  10. 项目源码--Android迷幻岛屿综合游戏

    下载源码 技术要点: 1.游戏开发综合技术 2.多线程机制实现游戏逻辑 3.自定义控件,系统控件等综合图层的使用 4.图层素材动画的综合技术 5.游戏算法的实现 6. OpenGL ES的综合使用 7 ...