什么是最好的CSS技巧,以减少您需要多少HTML？

什么是最聪明的CSS技术,让您使用更少的HTML？

使用CSS的一个优点是它可以让你简化你的HTML,并完全在CSS中产生外观效果.一开始,这只是用CSS替换弃用的HTML表示标记和spacer-GIF,但近年来已经显示出更多好主意.

我正在寻找比以下更不明显的东西.

HR用CSS 替换HTML border,用于分隔已经是DIV的部分.

对于非"内容"的图形,IMG用CSS 替换HTML background-image.

用CSS替换HTML文本:before,并content为文本,是不是"内容".

我不是在寻找涉及添加JavaScript或更多HTML的技术,例如其他DIV元素.

只有在说出哪些技术时,才能在特定浏览器和版本中使用的技术是可以的.

不在div中嵌套元素可以省略特异性,而只是给元素本身提供唯一标识符.

    

       
ListItem1
       
ListItem2
    

用...来代替

    
ListItem1
    
ListItem2

那样你的CSS就可以了

div#mylist ul li { }

至

ul#mylist li { }

并且HTML会少一些.

编辑:在不必要的情况下:)

使用聪明的CSS选择器而不是额外的类或ID.

一个例子(导航列表似乎很受欢迎):

    
Section 1

        
Section 1.1
        
Section 1.2
        ?
    
    
Section 2

        
Section 2.1
        
Section 2.2
        ?
    
    ?

更好:

    
Section 1

        
Section 1.1
        
Section 1.2
        ?
    
    
Section 2

        
Section 2.1
        
Section 2.2
        ?
    
    ?


#nav {
    /* first level list */
}
#nav li {
    /* first level items */
}
#nav li ul {
    /* second level list */
}
#nav li ul li {
    /* second level items */
}
?