【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选择器的基础上新增了属 ...
随机推荐
- JQuery 弹出层,始终显示在屏幕正中间
1.让层始终显示在屏幕正中间: 样式代码: .model{ position: absolute; z-index: 1003; width:320px; height:320px; text-ali ...
- xshell linux传文件
yum install lrzsz 安装完毕即可使用 rz,sz是便是Linux/Unix同Windows进行ZModem文件传输的命令行工具 windows端需要支持ZModem的telnet/s ...
- .git文件过大!删除大文件
在我们日常使用Git的时候,一般比较小的项目,我们可能不会注意到.git 这个文件. 其实, .git文件主要用来记录每次提交的变动,当我们的项目越来越大的时候,我们发现 .git文件越来越大. 很大 ...
- document.body为null的问题
虽然body是JS中的DOM技术中所有浏览器支持的属性,但在我们的代码编写中,还是会碰到document.is null问题 例如:我们可以使用alert(document.body);的时候,就会提 ...
- uva208 - Firetruck
Firetruck The Center City fire department collaborates with the transportation department to maintai ...
- 巧妙使用Jquery 改变元素的 onclick 事件
需要点击图片将套组发布, 页面代码: <img width="20px" src=" <s:property value="IMAGES_PATH& ...
- AIM Tech Round (Div. 2) A. Save Luke 水题
A. Save Luke 题目连接: http://codeforces.com/contest/624/problem/A Description Luke Skywalker got locked ...
- Codeforces Round #337 (Div. 2) A. Pasha and Stick 数学
A. Pasha and Stick 题目连接: http://www.codeforces.com/contest/610/problem/A Description Pasha has a woo ...
- HDU 5601 N*M bulbs 找规律
N*M bulbs 题目连接: http://codeforces.com/contest/510/problem/C Description NM个灯泡排成一片,也就是排成一个NM的矩形,有些开着, ...
- Codeforces Round #335 (Div. 2) C. Sorting Railway Cars 动态规划
C. Sorting Railway Cars Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/conte ...