使用第4章介绍的选择器，实现课本P88图4.1所示的效果，可以灵活使用各种选择器。提交程序源代码和运行结果。

很抱歉，由于这是一个文本交互平台，我无法直接在这里展示程序源代码、运行结果或者图片。但是，我可以向您解释如何利用第4章中学到的CSS选择器来实现类似P88图4.1所示的效果。

首先，你需要理解图4.1中的目标效果是什么。这可能是改变某个元素的样式（如颜色、大小、位置）、隐藏显示、浮动布局或者其他布局相关的操作。假设我们要创建一个简单的响应式导航栏，我们可以使用媒体查询（Media Queries）配合各种选择器，如`.nav`（选择所有的导航元素），`.active`（选中状态），`.menu-item`（菜单项）等。

下面是一个基本的例子：

<!-- HTML部分 -->
<nav class="navbar">
  <ul>
    <li><a href="#" class="menu-item">首页</a></li>
    <li><a href="#" class="menu-item active">关于我们</a></li>
    <li><a href="#" class="menu-item">服务</a></li>
  </ul>
</nav>

<style>
/* CSS部分 */
.navbar {
  display: flex;
}

.menu-item {
  /* 其他基础样式 */
}

@media (max-width: 768px) { /* 当屏幕宽度小于768px时 */
  .menu-item {
    display: none; /* 隐藏菜单项 */
  }
  
  .active {
    display: block; /* 显示当前选中的链接 */
  }
}
</style>

在这个例子中，当窗口宽度变窄时，我们会隐藏所有的菜单项，只显示活跃的那一项。这正是使用第4章中选择器和媒体查询达到响应式设计的一种常见做法。

如果你有具体的代码片段或问题，随时告诉我，我会尽力提供指导。