Html 使用外部示例的Css冲突

我是网页设计和开发的新手。 我看到

code-pen

有很多很好的例子，我想把这些例子和我的演示网站结合起来。 问题是代码笔演示有CSS，这与我正在进行的工作相冲突。 我下载了一个代码笔的

全屏

菜单，并且有a和li的CSS属性。这破坏了我的设计。 我如何解决这个问题？

---

谢谢

在样式表中创建自定义css，然后在其下方添加a和li的样式

例如：

.container a {
    // insert styles
   }
.list{
   // insert styles
  }
.item{
   // insert styles
   }

在html中

<div class="container">
  <a class="link"></a>
 <ul class="list">
   <li class="item"></li>
   <li class="item"></li>
   <li class="item"></li>
 </ul>
</div>

加载示例CSS后，您必须通过加载自己的CSS来覆盖不需要的样式（如li和a）

比如：

---

重要的是：在从codepen导入的内容之后加载您自己的CSS。很简单。

更改类名。@乔治，你是说我完全更改了代码笔类名？不，我是说你的类名。只是提醒一下，那是无效的CSS

<link rel="stylesheet" href="codepen.css" />
<link rel="stylesheet" href="youroverwrites.css" />

li { border:red !important };