如何仅为HTML页面特定区域引用样式库？

当然可以实现！不过直接用你现在的那个外部reset链接肯定不行——因为它的样式都是全局生效的，不管你把<link>标签放在页面哪个位置，里面的选择器（比如*、ul这些）都会匹配整个页面的元素，自然会影响全局。

你需要把Meyer Reset的代码“本地化”并修改，让它只作用于目标div内部，步骤如下：

1. 获取Meyer Reset的原始代码：打开你提供的CDN地址，把里面的CSS内容复制下来（就是那些重置margin、padding、列表样式的规则）。
2. 给所有重置规则加上目标div的选择器前缀：比如假设你的目标div的类是my-reset-container，那原来的* { ... }就要改成.my-reset-container * { ... }，原来的ol, ul { ... }改成.my-reset-container ol, .my-reset-container ul { ... }，以此类推，把每一条规则的选择器都嵌套在你的div选择器下面。
3. 替换原有的外部链接：把修改后的代码放到你的页面里（可以直接写在<style>标签中，或者单独的CSS文件里），删掉原来的<link>标签。

修改后的示例代码 #

/* 只作用于class为my-reset-container的div内部的重置样式 */
.my-reset-container * {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.my-reset-container {
  line-height: 1;
}
.my-reset-container ol, .my-reset-container ul {
  list-style: none;
}
.my-reset-container blockquote, .my-reset-container q {
  quotes: none;
}
.my-reset-container blockquote:before, .my-reset-container blockquote:after,
.my-reset-container q:before, .my-reset-container q:after {
  content: '';
  content: none;
}
.my-reset-container table {
  border-collapse: collapse;
  border-spacing: 0;
}

这样一来，所有的重置样式就只会对class="my-reset-container"的div内部的元素生效，不会影响页面其他部分了。

内容的提问来源于stack exchange，提问作者Zack Roberto