时间戳

首页 > 解决方案 > css 选择器如何重用于多个 html 页面？

html - css 选择器如何重用于多个 html 页面？

问题描述

我正在做我的 uni 项目 - 一个网站。我已经开始看到很多代码重复了——{} 里面的样式细节几乎相同，只是选择器的名称在名称上略有不同。我的问题是如何在不重复内部所有细节的情况下重用初始选择器？

例如，这是我的“主页”页面：

.banner-container {
    width: 100%;
    height: 512px;
    justify-content: space-around;
    position: fixed;
    background-image: url(pexels-florencia-potter-351300-bicycle-banner.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 20%);
    z-index: -1;
    background-position: 50% 50%;
}

这是“联系我们”页面：

.contacts-banner-container {
    width: 100%;
    height: 512px;
    justify-content: space-around;
    position: fixed;
    background-image: url(pexels-burst-374085.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 20%);
    z-index: -1;
    background-position: 50% 50%;
}

我知道重复是一件坏事，但我找不到任何提示如何在类似情况下避免这种情况。

标签： htmlcss

解决方案

对所有重复属性使用单个类：

.fixed-image {
    width: 100%;
    height: 512px;
    justify-content: space-around;
    position: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 20%);
    z-index: -1;
    background-position: 50% 50%;
}
.banner-container {
    background-image: url(pexels-florencia-potter-351300-bicycle-banner.jpg);
}
.contacts-banner-container {
    background-image: url(pexels-burst-374085.jpg);
}

然后给元素fixed-image类和适当的其他类。（根据需要重命名类，您可能需要比 . 更具体的内容fixed-image。）

推荐阅读