CSS选择器小结

1：类选择器

HTML： <div class="test">测试代码</div>

CSS： .test {color:red;border:1px blue solid;}

在html文档里，我们在要控制样式的标签的开标签（非成对标签如input直接放在标签里）里加入 class="xxx",在页面对应的css文件里，用.xxx就可以指向这个标签，从而对这个标签进行控制，我们称这种通过定义类（class）来找到标签的方式为 ：类选择器。

这种定义class 的方式是3G前端开发最常用的选择器，有几个突出的特点：可以给不同的标签设置同一个类，从而用一条CSS命令控制几个标签，减少大量代码，是页面修改简单，易维护，易改版；其次，后台工作人员机会不会用到有关class的相关设置，不需要跟后台人员之间进行交互；再者，可以通过js等动态改变标签的 Classname，从而改变整个标签的样式，使3G前端动态效果实现起来更为容易。

2：标签名选择器

CSS: div {color:red;border:1px blue solid;} span {float:right;}

这个选择器十分简单，就是直接在CSS文件里用标签名找到对应的页面标签，在教学的过程中，也是最容易被学生接受的一种选择器，在实际的应用中，还是比较有用武之地的，我们习惯把它用在继承选择器里，比如 .orderlist li {xxxx} 或者 .tableset td {}

我们使用的时候一般用在重复出现并且样式相同的一些标签里，不如 li td dd等。

3：ID选择器

HTML： <div id="test">测试代码</div>

CSS： #test {color:red;border:1px blue solid;}

ID选择器跟类选择器有很大的不同：一个页面内不能出现相同的ID；再就是ID也是后台开发人员会经常用的，所以3G前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后，这些都不会成为限制。

选择器的扩展应用：

4：后代选择器

HTML： <div class="test"> <span><img src="xxx" alt="示例图片"/></span> </div>

CSS： .test span img {border:1px blue solid;} div span img {border:1px blue solid;}

后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为 test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。

5：群组选择器

CSS： .test1,span,test2 {border:1px blue solid;} div,span,img {border:1px blue solid;}

群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。

CSS选择器及优先级

CSS选择器的优先级，一直是初学者比较头痛的问题，经常会有人问我为什么我的CSS定义的属性不能显示，这时候的一般就是因为选择器的优先级问题，举个简单的例子：

HTML文档里存在下面的标签嵌套CSS：

<div class="test1"> 　　<span class="span1"> 　　span1 的内容 　　</span> 　　<span> 　　span2的内容 　　</span> 　　</div>

如果我已经把.test1下面span内的字体设置成红色：

.test1 span {color:red;}

这时，如果我要改变.span1的颜色为蓝色，用下面的命令是不能实现的：

.span1 {color:blue;}

出现这种情况就是因为后一个命令的优先级不够，两条相互冲突的样式设置，浏览器只会执行优先级较高的那个。

选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。比如上例当中 .test1 span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .span1 的优先级是10;浏览器自然会显示 红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：

div.test1 .span var 优先级 1+10 +10 +1

span#xxx .songs li 优先级1+100 + 10 + 1

#xxx li 优先级 100 +1

对于什么情况下使用什么选择器，用不同选择器的原则是：第一：准确的选到要控制的标签；第二：使用最合理优先级的选择器；第三：HTML和CSS代码尽量简洁美观；这三条原则是多年工作经验的总结，想要做到尽善尽美需要大量的项目锻炼。

通常：1‘ 最常用的选择器是类选择器。2’：li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。3：极少的情况下会用ID选择器，我个人是极少用的，不过有些3G前端开发人员喜欢把 header,footer,banner,conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次，因此使用ID选择器可以使得代码可阅读性更高，未尝不可。

在这里不得不提使用在标签内引入CSS的方式来写CSS，即： <div style="color:red">sdfsd</div>

这时候的优先级是最高的。