css - CSS中的类名冲突

Question

我正在使用 materializeCSS 来构建一个网站，它已经有一个名为 carousel 的类。但是，我希望使用Flickity的轮播，并且我想知道如果我将这两个文件都包含在 html 中会发生什么。

这个问题有点类似于这个问题，但答案不满足我的查询。

Answer 1

我检查了 github 上的 flickity 轮播（https://github.com/metafizzy/flickity/blob/master/dist/flickity.css），在我看来，css 中的所有内容都以 .flickity- 开头，所以不应该成为问题。

您可能正在谈论在他们的网站上找到的这部分：

$('.main-carousel').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

这.main-carousel可以是您想要的任何东西，只要它与您在标记中使用的类匹配：

<div class="main-carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
</div>