【CSS3】---属性选择器
在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】---属性选择器的更多相关文章
- CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- css3属性选择器总结
前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...
- css3 -- 属性选择器
属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- css3属性选择器
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- CSS3选择器(二)之属性选择器
CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...
- CSS2属性选择器和css3选择器的用法和区别
兄弟们,这是我第一次写博客,希望对进来的人有用,写的不好别喷哈,谢谢. css2属性选择器: 1.[attribute] 例子: [title] 解释: 选择含有 title 属性的所有元 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
随机推荐
- codis3.1集群搭建
Codis31搭建 codis 3.1 安装搭建 一.基本信息 1. 服务器基本信息 ip地址 安装服务 172.16.200.71 zk1.codis-dashboard.codis-fe.codi ...
- silverlight调用MVC WebApi方法
1.创建ASP.NET MVC4 Web应用程序,选择WebAPI模板 2.添加silverlight项目 3.新建一个数据模型类,代码如下: using System; using System.C ...
- MariaDB5.5.32 绿色版下载安装一条龙
1.下载地址: http://ftp.yz.yamagata-u.ac.jp/pub/dbms/mariadb/mariadb-5.5.32/win32-packages/mariadb-5.5.32 ...
- javascript计算字符串的字节长度
String.prototype.byteLen = function(){ var len = 0, i = this.length; while(i--) { len += (this.charC ...
- JavaScript的角色巨变和Web技术的发展
曾经JavaScript是职业程序员看不上眼的脚本语言,如今只有高级程序员才能驾驭它. JavaScript性质和地位的天翻地覆,正是Web技术飞速变化的印证. 最初职业程序员轻视JavaScript ...
- sql注入在线检測(sqlmapapi)
之前一搞渗透的同事问我.sqlmapapi.py是干啥的,我猜非常多人都玩过sqlmap,但玩过sqlmapapi的应该比較少,今天就和大家一起看看怎样使用以及一些美的地方. 说白了.sqlmapap ...
- 《计算机问题求解》总结——2014年CCF计算机课程改革导教班(2014.07.11)
一:引言 "心想事成".这是自己获得导教班学习机会的最佳概括.2013年年末学习李晓明老师的<人群与网络>课程:随后网络认识烟台大学贺利坚老师,了解到2013年 ...
- mvc cookie
Response.Cookies["userName"].Value = "ddd"; <% if (Request.Cookies[" ...
- [Angular2 Router] Understand the Angular 2 Base href Requirement
The <base href=”/”/> you define will determine how all other assets you plan on loading treat ...
- [Express] Level 3: Massaging User Data
Flexible Routes Our current route only works when the city name argument matches exactly the propert ...