作者：Robert 来源：天涯博弈 酷勤网收集 2008-05-16
这个不是新鲜的东西，只是刚好有一个同学问我blog上的导航是如何定位（聚焦）的，由此引申一下而已，可能对于新接触css的朋友有些帮助。
笔者博客是采用blogger.com的ftp功能发布的，由于blogger的模板功能没有标签（分类）的相应标签，所以只好用js来判断当前页面是否是某个标签页，有些麻烦也不是很完善，详细的讲解请见：给blogger的ftp发布增加导航栏标签定位。
这里要讲的当然不是这么笨拙的方法，而是利用css进行轻量级（不需要js判断，也不需要动态脚本控制）并且简便易学的方法，前提是你页面导航链接对应不同的模板页面。
页面示例：http://www.tianya8.net/pages/tutorial/nav/
CSS进行定位的原理在于css的继承性和优先级。
什么叫继承性？简单来说就是子标签内的元素会继承父标签的样式属性，常见的就是在body中定义color:#000；那么由于body是所有标签的父标签，所以页面中层（div）、段落（p）、文本（span）的文字都会继承body的样式，文字颜色为黑色。
而css的优先级是一个越讲越复杂的东西，在这里我们不讨论css选择符优先值的算法，有兴趣的可以参考W3C组织的CSS优先级文档。在这里只需要明白如p span{color:#000}的优先级高于span{color:#f60}，当在样式表中同时出现上面两行样式时页面中的span元素颜色实际上是#000。
聪明的你可能已经了解，我们要做的就是对于导航链接先写就一个通用的样式，然后再针对具体页面为某个链接增加优先级，这样在某个页面的某个链接就能以其他的样式呈现。
1、html结构
下面是一个基本的导航标签：<ul>
<li class="home"><a href="index.html">HOME</a></li>
<li class="blog"><a href="blog.html">BLOG</a></li>
<li class="about"><a href="about.html">ABOUT</a></li>
</ul>
2、通用样式ul{ padding:0; margin:0;}
ul li{ background:#000; text-align:center; padding:3px 15px; margin:0 1px ; float:left; list-style:none}
ul li a, ul li a:visited{ font:bold 14px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none}
3、关键部分
在您的index.html的代码中找到<body>标签，为其命名写为<body id="home">
4、定时当前页面的导航链接样式
在您的样式表里添加一行：#home .home{ background:#ccc}
为什么要这么写呢？
在第二步里，我们在css里为链接定义了通用的样式，这样导航的三个链接都具有相同的外观，而在index.html里有独有的元素id——home，并且该元素是li的父级元素，所以#home .home{}的优先级要高于ul li，这样在#home .home{}里定义的样式将重写ul li里预定义的样式。因此在index.html页面上，第一个class名为home的链接样式将与其他不同。
与此类推，在blog.html和about.html中分别为body命名id，则在不同的页面对应的链接将具有不同的样式。
完整的样式表如下：ul{ padding:0; margin:0;}
ul li{ background:#000; text-align:center; padding:3px 15px; margin:0 1px ; float:left; list-style:none}
ul li a, ul li a:visited{ font:bold 14px Arial, Helvetica, sans-serif; color:#fff; text-decoration:none}
#home .home{ background:#ccc}
#about .about{ background:#ccc}
#blog .blog{ background:#ccc}
按照css的简写原则，后面三行可以写为一行：#home .home, #about .about, #blog .blog{ background:#ccc}
如此，一个轻便的css定位就基本完成了。运用css的继承和优先级特性，您可以为不同的页面对应的导航设置丰富的样式，重要的是，您不需要用脚本来复杂的控制导航定位（聚焦），需要做的只是为不同的页面增添一个父级ID，以及为您的导航链接分别定义class名（定义id也可）。
事实上，您只需在导航链接的任一父级元素命名ID均可采用这样的方式来书写样式表，但显然我们在页面中最容易修改也最容易标记的就是body标签，并且尽管你的页面标签非常复杂的变化，但是body标签却是永远存在的，因此，选择在body上加id是有更多的优点的。
来自：用css进行导航定位