CSS选择器
1.页面中有如下部分：
<div> <a> sdfsd1</a> <a> sdfsd2</a> <a> sdfsd3</a> </div> <div> <a> sdfsd4</a> <a> sdfsd5</a> </div>
如果要为每个div的第一个子元素添加一个样式，如字体颜色为蓝色，可以每个标签上添加class，如下：
CSS：
div .first-child{color:blue;}
页面：
<div> <a class="first-child"> sdfsd1</a> <a> sdfsd2</a> <a> sdfsd3</a> </div> <div> <a class="first-child"> sdfsd4</a> <a> sdfsd5</a> </div>
若div元素很多，需要重复写很多class，可以使用伪类，如下：
样式：
div :first-child{color:blue;}
页面：
<div> <a> sdfsd1</a> <a> sdfsd2</a> <a> sdfsd3</a> </div> <div> <a> sdfsd4</a> <a> sdfsd5</a> </div>
效果和2的方式一样
显示效果：
属性选择器
一、简单的属性选择
基本思路：通过已有元素属性，或基于元素属性的某个方面进行选择。
假如页面有以下元素
<a href="http://www.baidu.com"> 1</a> <a name="top"> 2</a> <a href="http://www.163.com"> 3</a>
1.a[href]
如:a[href] { color:red;}
解释：将所有含有href属性的a标签设置为红色（只要含有href属性即可匹配，而不看href的值）
结果：1、3链接变为红色
2.a[href="http://www.163.com"] {color:blue;}
解释：匹配指定属性值的元素，这里是精确匹配。（注意文档语言是否区分大小写，为了避免出错可以假定是区分大小写的）
二、类的属性选择
标签名[class~="类名"] 等同于 标签名.类名
解释：匹配以空格分隔的类名列表中包含某词的元素
如：div[class~="panel"]（等同于div.panel），匹配组合类中含有panel名称的div标签。
假如页面有以下元素：
<div class="panel divWidth"> <a href="http://www.baidu.com"> 1</a> <a name="top"> 2</a> <a href="http://www.163.com"> 3</a> </div> <br /> <div class="divWidth panel"> <a href="http://www.baidu.com"> 4</a> </div> <br /> <div class="panel"> <a href="http://www.baidu.com"> 5</a> </div>
样式：
.divWidth{width:200px;} div[class~="panel"]{border:1px dashed black;}
等同于：
.divWidth{width:200px;} div.panel{border:1px dashed black;}
结果：
注意：如果去掉波浪线~，只有最后一个div加上了边框，前两个div不会被匹配中。
三、ID、类、属性选择器
使用ID还是类？
假如在网站全局样式中有如下定义：
#header {background:black;} #header a{color:white;}
某天如客户想要将某一页面做的与其他页面不同，我们又在某一页面中加入以下样式：
#header {background:white;} .mylink a{color:blue;}
这个时候a标签的颜色是没有被覆盖的，因为#header a 比.mylink a具有更高的特殊性。
解决方法，页面样式修改如下：
#header a,.mylink a{color:blue;} 或 #header .mylink a,.mylink a{color:blue;}
看上去是不是很繁琐，如果将全局样式中的ID改为类就很容易，将原来的全局样式改为如下(记得把html中的ID修改为类)：
.header {background:black;} .header a{color:white;}
如果要在某个页面中覆盖样式，在页面中可以这样写：
.header {background:white;} .mylink a{color:blue;}
结论：在选择使用ID或类的时候，尽量选择使用类，减少其特殊性带来的不能重写覆盖问题。如果必须使用ID，还可以使用属性选择器解决（注意不同浏览器对属性选择器的支持问题）
下面看下属性选择器，假如页面有如下内容：
<div id="myID1"> 123 </div>
样式如下：
div#myID1{color:red;font-weight:bold;} div[id="myID1"]{color:green;font-style:italic;}
div内的内容颜色并没有变为green，因为ID具有更高的特殊性，所有在需要使用ID的地方，可以使用属性选择器去匹配，避免了以后重写样式带来的覆盖问题。
四、部分属性值选择
如：a[href*="http://www.XX.com"]
*= 是包含的意思，只要值中包含指定的内容值就匹配(相当于子串匹配)。
如：a[href^="http"]
^= 是以...开头
如：a[href$="http"]
$= 是以...结尾
五、选择后代元素
1.选择所有后代
页面：
<ol> <li>1</li> <li>2 <ul> <li>21</li> <li>22</li> <li>23</li> </ul> </li> <li>3</li> <li>4</li> </ol>
样式：
ol li{list-style:upper-alpha;}
ul也会被匹配中。
2.选择子代
只需将样式修改为：
ol>li {list-style:upper-alpha;}
只匹配ol的子代元素，不包括后代元素ul。
