时间戳

首页 > 解决方案 > 在 css 中将多个 id 与单个类合并的最佳实践是什么？

css - 在 css 中将多个 id 与单个类合并的最佳实践是什么？

问题描述

我有3 个 id：#example1, #example2, #example3它们都共享相同的 css 类：.carousel-container。目前我的代码是：

#example1 .carousel-container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
}

#example2 .carousel-container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
}

我正在尝试整理代码，就像这样：

#example1, #example2, #example3 {
 .carousel-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
}
}

这是浏览器兼容性的坏习惯吗？解决这个问题的最佳方法是什么？

标签： css

解决方案

执行此操作的 CSS 方法是这样的：

#example1 .carousel-container,
#example2 .carousel-container,
#example3 .carousel-container {
   display: flex;
   justify-content: center;
  /* et cetera */
}

或者，您可以按照评论中的建议进行操作，为此目的创建一个新类，然后简单地引用该类：

.my-custom-carousel-container {
   display: flex;
   justify-content: center;
  /* et cetera */
}

或者，如果.carousel-container没有在其他任何地方使用不同的样式，那么您甚至不需要执行上述任何一个选项。您可以简单地将样式添加到该类本身并完成它：

.carousel-container {
   display: flex;
   justify-content: center;
  /* et cetera */
}

推荐阅读