html - 将一段代码与另一段代码分开

Question

我不知道这是否有意义，请原谅我使用不好的术语(刚开始学习)，但我想做的是将一段代码与另一段代码分开，这样它的标签就不会影响我不想受到影响的代码。

我更改了 codepen 中的一些代码来为页面制作轮播。我在另一个元素中输入了页面代码。我尝试将该轮播代码导入到主页的代码中，但是由于轮播代码中的某些标签与主页的相同，因此它没有按照我想要的方式进行布局，因为它会产生干扰。我会更改标签，但它们是“通用”标签，例如 img 或 a。

有没有办法将 CSS 代码与主代码分开？就像为它分配一个单独的 div 并将该 div 应用到 HTML 中轮播的容器？

Here's the carousel和 the main code (尝试在关于部分下方添加轮播)。

Answer 1

嗯，这很简单，使用 CSS 设置样式的最佳方法是:

切勿直接将样式应用于 HTML 标记，因为这会影响包含您的样式的所有页面，因此最好:

使用 classes 和 ids 为页面中的某些特定元素设置样式，这样在页面中包含您的 css 只会影响这些特定元素:

#myElementId{
    ...
    ...
}
.myElementsClass{
    ...
    ...
}

注意:

对页面中的唯一元素使用 id，对页面中的多个元素使用 class。

---

嵌套 CSS 类:

要回答有关使用嵌套类的问题，您不能只使用 CSS，您应该使用 SASS 或 LESS

引用资料:

如需进一步阅读，您可以查看:

• The answer to Nesting CSSclasses question on Stackoverflow

• Nested selectors: the inception rule