CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码: div id="subnav"> ul> li class="subnavitem"> a href="#" class="subnavitem">Item 1/a>/li>> li class="subnavitemselected"> a href="#" class="subnavitemselected"> Item 1/a> /li> li class="subnavitem"> a href="#" class="subnavitem"> Item 1/a> /li> /ul> /div>
这段代码的CSS定义是: div#subnav ul { /* Some styling */ } div#subnav ul li.subnavitem { /* Some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } div#subnav ul li.subnavitemselected { /* Some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码 ul id="subnav"> li> a href="#"> Item 1/a> /li> li class="sel"> a href="#"> Item 1/a> /li> li> a href="#"> Item 1/a> /li> /ul>
样式定义是: #subnav { /* Some styling */ } #subnav li { /* Some styling */ } #subnav a { /* Some styling */ } #subnav .sel { /* Some styling */ } #subnav .sel a { /* Some styling */ }
通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear: both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural Markup》(注:本站将尽快翻译此文)。
上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被广泛讨论。
* 1.注释的方法 o (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child selector): html>body p { /* 定义内容 */ } o (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏) * html p { /* declarations */ } o (c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用"反斜线"技巧: /* \*/ * html p { declarations } /* */ * 2.条件注释(conditional comments)的方法