我希望实现一个服务器端的header.shtml，它能够识别活动页面（可能是通过向其中添加css类）
<header class="topbar container">
<a href="http://www.example.com/" rel="home">
<div class="logo grid">
<h1 class="ir">Home</h1>
</div>
</a>
<nav class="navbar" role="navigation">
<ul>
<li class="active"><a href="about.html">About</a>
</li>
<li><a href="projects.html">Projects</a>
</li>
<li><a href="blog.html">Blog</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</nav></header>
我试图通过使用.shtml和来减少代码
<!--#include virtual="/header.shtml" -->
不过，我猜这只能通过Javascript或JQuery完成，但我想知道它是否只能通过css完成？
是的，这只能用CSS完成。我从这本书中学到了这个解决方案：CSS:The Missing Manual，它基于后代选择器。
首先，为每个导航条目分配一个唯一的id：
<ul>
<li id="nav_about"><a href="about.html">About</a>
</li>
<li id="nav_projects"><a href="projects.html">Projects</a>
</li>
<li id="nav_blog"><a href="blog.html">Blog</a>
</li>
<li id="nav_contact"><a href="contact.html">Contact</a>
</li>
</ul>
然后，为每页的body标签分配一个id：
<!-- about.html -->
<body id="about">
<!-- projects.html -->
<body id="projects">
<!-- blog.html -->
<body id="blog">
<!-- contact.html -->
<body id="contact">
最后，用CSS:设计导航栏的样式
nav li {
/* default nav entry style here */
}
#about #nav_about, #projects #nav_projects, #blog #nav_blog, #contacts #nav_contacts {
/* active nav entry style here */
/* styles declared here will override the defaults because this selector has more specificity */
}