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>
这时候的优先级是最高的。