首页 > Web开发 > 详细

网站前端设计——选择器

时间:2016-07-22 21:32:20      阅读:286      评论:0      收藏:0      [点我收藏+]

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开始兼容;IE67都不兼容

选择第1li

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  }

由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE67,那么就要自己写类名:

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  }

5  ul li.last{

6  color:blue;

7  }

 

8、下一个兄弟选择器

 

网站前端设计——选择器

原文:http://www.cnblogs.com/sylz/p/5697079.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!