CSS 中的冲突 class 名称

Question

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

这个问题和this one有些相似，但是答案不符合我的要求。

Answer 1

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

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

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

.main-carousel 可以是您想要的任何内容，只要它与您在标记中使用的 class 匹配即可：

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

CSS 中的冲突 class 名称

Conflicting class name in CSS

css

materialize

flickity