时间戳

首页 > 解决方案 > 最小化 WordPress 相同代码不同页面上的自定义 CSS

css - 最小化 WordPress 相同代码不同页面上的自定义 CSS

问题描述

我想最小化应用于不同页面的 CSS 代码相同的问题，它只会更改页面 ID

提前致谢

以两段不同的代码为例：

1-

.page-id-46560 .fw-page-builder-content {
  margin-top: -90px;
}

.page-id-46560 .entry-cover {
  display: none;
}

@media screen and (min-width:360px) and (max-width:640px) {
  .page-id-46560 .fw-page-builder-content {
    margin-top: 0px;
  }
}

.page-id-46619 .fw-page-builder-content {
  margin-top: -90px;
}

.page-id-46619 .entry-cover {
  display: none;
}

@media screen and (min-width:360px) and (max-width:640px) {
  .page-id-46619 .fw-page-builder-content {
    margin-top: 0px;
  }
}

.page-id-47450 .fw-page-builder-content {
  margin-top: -90px;
}

.page-id-47450 .entry-cover {
  display: none;
}

@media screen and (min-width:360px) and (max-width:640px) {
  .page-id-47450 .fw-page-builder-content {
    margin-top: 0px;
  }
}

和

2-

.page-id-30363 .fw-page-builder-content {
  margin-top: -90px;
}

@media screen and (min-width:360px) and (max-width:640px) {
  .page-id-30363 .fw-page-builder-content {
    margin-top: 0px;
  }
}

.page-id-30368 .entry-cover {
  display: none;
}

html>.page-id-30368>div:nth-child(3)>#colophon>div:nth-child(1)>div:nth-child(1)>#text-2>div:nth-child(1)>p:nth-child(3) {
  display: none;
}

.page-id-30368 .fw-page-builder-content {
  margin-top: -90px;
}

@media screen and (min-width:360px) and (max-width:640px) {
  .page-id-30368 .fw-page-builder-content {
    margin-top: 0px;
  }
}

.page-id-30373 .entry-cover {
  display: none;
}

html>.page-id-30373>div:nth-child(3)>#colophon>div:nth-child(1)>div:nth-child(1)>#text-2>div:nth-child(1)>p:nth-child(3) {
  display: none;
}

.page-id-30373 .fw-page-builder-content {
  margin-top: -90px;
}

@media screen and (min-width:360px) and (max-width:640px) {
  .page-id-30373 .fw-page-builder-content {
    margin-top: 0px;
  }
}

.page-id-30387 .entry-cover {
  display: none;
}

html>.page-id-30387>div:nth-child(3)>#colophon>div:nth-child(1)>div:nth-child(1)>#text-2>div:nth-child(1)>p:nth-child(3) {
  display: none;
}

标签： csswordpress

解决方案

你真的必须基于页面ID吗？如果您需要特定页面的特定样式，也许这些页面基于相同的模板或可以？

如果是，您可以只写：

.page-id-page-template-... .fw-page-builder-content {
   margin-top: -90px;
}
...

推荐阅读