CSS3第一课：被IE耽搁了的属性选择器_CSS教程

CSS2系列的教程已经更新完毕很久了，今天终于开始了CSS3系列教程的更新，貌似又是一个漫长的过程！

还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦，知识都是有体系的，基础没有打好，后面的内容会更吃力。

既然是系列教程，那还是要按照体系来，先把最基础的选择器讲完。

CSS3新增了很多很棒的选择器，其中属性选择器在CSS2就有一部分了，在CSS3又增加了几个。为什么在以前属性选择器用的少呢，还不是因为IE6低版本支持不友好嘛，不过现在IE6已经彻底灭亡，所以让我们欢快地迎来属性选择器的使用吧。

一、属性选择器

选择器	例子	例子描述	CSS版本
[attribute]	[alt]	选择带有 alt属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute\|=value]	[class\|=top]	选择其 class 属性值以 "top" 开头的元素。该值必须是整个单词，比如class="top"，或者后面跟着连字符，比如class="top-nav"，class="top-nav mobile"	2
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3

二、案例

1、选择有alt属性的图片。

img[alt]

2、选择提交按钮。

input[type=submit]{
	border:none;
	background-color:#F36;
	width:200px;
	padding:10px;
	color:#fff;
	cursor:pointer;}

3、选择class属性包含“box”这个单词的对象。

<div class="boxbg">1</div>
<div class="bg1 box">2</div>
<div class="box bg2">3</div>

[class~=box]{
	background-color:#999;}

此时，只能选中后面两个div，因为第一个div，class属性中的box不是作为一个独立的单词存在。

4、选择class为list开头的元素。

<ul>
        <li class="list-1">1</li>
        <li class="list2">2</li>
        <li class="list">3</li>
</ul>

[class|=list]{
	color:#F36;}

此时，只能选中第一个和第三个li元素。这里的list必须是一个独立的单词或者list后面有连字符“-”的单词。

5、以案例4为例，但是使用该选择器，则可以选中所有以list开头的元素。

[class^=list]{
	color:#F36;}

这里的以什么开头，不管是独立的单词，还是有连字符的单词，还是和别的字符混在一起的单词，只要以list开头，都可以选中。区别于[class|=list]

6、选中所有jpg图片

img[src$=".jpg"]  /*这里必须有双引号，把.jpg引起来，或者使用转义字符：img[src$=\.jpg]*/

7、选择路径里面包含mrszhao的链接

<a href="http://www.mrszhao.com">赵老师web前端开发教学博客</a>
<a href="http://www.mrszhao12.com">百度一下</a>
<a href="http://www.bmrszhao14.com.cn">百度一下</a>

[href*=mrszhao]{
	font-weight:bold;}

此时的包含，不管mrszhao是独立单词，还是前后有内容，只要有mrszhao这个子字符串，都可以选中。区别于[class~=box]。

属性选择器主要注意两点：

1、[attribute|=value]和[attribute^=value]都是以value开头，但是一个是独立的单词，一个是子字符串。[attribute~=value]和[attribute*=value]都是包含value值，但是一个是独立的单词，一个是子字符串。

2、如果属性值里面有“.”,“:”,"/"等特殊字符的时候，要用“”双引号引起来，或者使用转义字符“\”。

一半设计一半前端