经验总结：css的一些书写技巧-CSDN博客

本文链接：https://blog.csdn.net/g154625119/article/details/6067442

废话不多说直接入正题！

我们都知道css可以通过ID 和 Class来控制html的显示样式！但是对于许多初学css的朋友来说可能就仅仅通过如下方式来写css的

#myID{ background-color:blue;} .myclass{ background-color:green;}

来空写如下的html

<div id="myID">content</div> <div class="myclass">content</div>

其实他的书写方式也只有这两种而已！但是我们还比知道的就是他们之间的配合使用了，看下面代码

.gc{ background-color:yellow;} .c1{ background-color:orange;} .gc.c1{ background-color:green;} .gc .c1{ background-color:blue; margin-left:50px;}

<div class="gc">yellow <div class="c1">blue</div> </div> <div class="c1">orange</div> <div class="gc c1">green <div class="c1">blue</div> </div>

这段代码运行后的结果如图：

详细介绍我就不做介绍了了！看上面css和运行结果最就好了！

其实这样的书写方式同样使用于 ID 和 Class相互配合的方式如下面的css

#gc{ background-color:yellow;} .c1{ background-color:orange;} #gc.c1{ background-color:green;} #gc .c1{ background-color:blue; margin-left:50px;}

<div id="gc">yellow <div class="c1">blue</div> </div> <div class="c1">orange</div> <div id="gc" class="c1">green <div class="c1">blue</div> </div>

运行结果页和上图一样！

下面是所有的整体的html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.gc{ background-color:yellow;} .c1{ background-color:orange;} .gc.c1{ background-color:green;} .gc .c1{ background-color:blue; margin-left:50px;} #gc{ background-color:yellow;} .c1{ background-color:orange;} #gc.c1{ background-color:green;} #gc .c1{ background-color:blue; margin-left:50px;}</style> </head> <body> <div class="gc">yellow <div class="c1">blue</div> </div> <div class="c1">orange</div> <div class="gc c1">green <div class="c1">blue</div> </div> <br /><br /> <br /> <br /> <div id="gc">content <div class="c1">c</div> </div> <div class="c1">content</div> <div id="gc" class="c1">content <div class="c1">c</div> </div> </body> </html>

原文链接：http://www.tinds.com/2010-12-6-154001.html