网站前端设计——选择器
1、类名是可以重复的
要从整个页面考虑去分出一些公共类,就是说一个类名不要只针对一个标签。一个标签可以用空格隔开多个类。、
1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
2、后代选择器
他的存在就是为了共性和特性的平衡。他描述的是祖先结构,并不是机械的吧前面所有的祖先都要写上。只要能通过这个祖先结构找到他就可以了。
3、交集选择器
1 h3.special{ 2 color:red; 3 } |
选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。交集选择器没有空格。
交集选择器可以连续交(一般不要这么写)因为IE6不兼容。交集选择器一般以标签开头。
1 h3.special.zhongyao{ 2 color:red; 3 } |
4、并集选择器
逗号表示并集。
5、通配符 *
6、儿子选择器
IE7开始兼容,IE6不兼容。
1 div>p{ 2 color:red; 3 } |
div的儿子p。和div的后代p的截然不同。
能够选择:
1 <div> 2 <p>我是div的儿子</p> 3 </div> |
不能选择:
1 <div> 2 <ul> 3 <li> 4 <p>我是div的重孙子</p> 5 </li> 6 </ul> 7 </div> |
7、序选择器
IE8开始兼容;IE6、7都不兼容
选择第1个li:
1 <style type="text/css"> 2 ul li:first-child{ 3 color:red; 4 } 5 </style> |
选择最后一个1i:
1 ul li:last-child{ 2 color:blue; 3 } |
由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名:
1 <ul> 2 <li class="first">项目</li> 3 <li>项目</li> 4 <li>项目</li> 5 <li>项目</li> 6 <li>项目</li> 7 <li>项目</li> 8 <li>项目</li> 9 <li>项目</li> 10 <li>项目</li> 11 <li class="last">项目</li> 12 </ul> |
用类选择器来选择第一个或者最后一个:
1 ul li.first{ 2 color:red; 3 } 4 5 ul li.last{ 6 color:blue; 7 } |
8、下一个兄弟选择器