网站前端设计——选择器

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、下一个兄弟选择器