如何仅更改主页/首页的 CSS 填充答案

【问题标题】：How can I change the CSS padding for just the homepage/frontpage如何仅更改主页/首页的 CSS 填充
【发布时间】：2019-07-14 10:00:52
【问题描述】：

在我的website 上，我添加了以下代码，我只打算将其应用于我的帖子，例如this。

@media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}

显然，它已应用于网站上的所有页面。在某些页面上没问题，但 homepage/frontpage 在计算机上被搞砸了。如果向下滚动，帖子下方的摘录（描述）会应用这些边距。

如何使上述更改仅适用于帖子而不适用于首页/主页？ 明确地说，我想从主页/首页中删除这些填充。我想将它们保留在我的帖子中。

这是人们给我的建议之一，但没有奏效。如果我把这个数字从 20% 减少，什么也没有发生。如果我增加填充，边距会变大，好像最小值设置为 20%。

.home .posts-loop .entry-summary{
  font-size: 21px;
  padding-right: 20%;
  padding-bottom: 10px;
  padding-left: 20%;
}

【问题讨论】：

【解决方案1】：

对于主页/首页，只需提供另一个自定义类名称，然后将填充设置为 0，否则您需要编写“！important”。例如 .cstm_home { padding: 0 !important; } 。希望能解决你的问题。

【讨论】：

【解决方案2】：

我看到的一个简单方法是为主页创建一个不同的样式表。我不确定您是否使用全局样式表，如果是，则应删除将 CSS 链接到此页面的行。

更谨慎的方法是使用另一种类型的选择器而不是段落标签，在您希望以上述方式设置样式的所有段落中放置一个 id，并在您的 CSS 中使用此 id 或任何其他选择器。

干杯！我希望这会有所帮助....

【讨论】：

【解决方案3】：

我的建议是在主页的 p 标签中添加一个类。 HTML 应该是这样的

<p class="homepagepara">blah blah blah.....</p>

css 会是这样的。

p.homepagepara {
    margin: 0;
    padding:0;
}

创建类后，您可以按照自己的意愿设置这些页面的样式。它将仅针对主页段落。希望这可以帮助。如果您还有其他问题，请告诉我

【讨论】：

【解决方案4】：

欢迎艾哈迈德。

人们给你的建议不起作用，与类名有关（注意名称前的点： .home | .ports-loop | .entry-summary 。这表示是类）。

在您的第一个示例中，您只使用 p 。这会影响所有 p html 元素。

因此，您的解决方案是在要应用 css 规则的段落中添加一个类：

<p id="xxxx" name="xxxx" class="SomeClass">

然后，在您的 css 代码中，使用 .SomeClass {...} 设置要应用的规则。

此规则应仅适用于设置为 class="SomeClass" 的元素，而不适用于其他元素。

【讨论】：

【解决方案5】：

我希望你也分享了你的 HTML。但一般的答案是您选择了 html 文档中的所有 p 元素以具有提到的填充。所以当然它适用于页面上的任何地方。

解决方案 1：如果它们是单独的 html 页面，您可以链接单独的样式表并仅在所需页面中包含填充。

解决方案 2：更具体地使用 css 选择器。例如，如果帖子的包装 div 具有 .posts 类，则将您的 css 编写如下：

.posts p {
  font-size: 21px;
  padding-right: 20%;
  padding-bottom: 10px;
  padding-left: 20%;
}

【讨论】：