如何仅更改 homepage/frontpage 的 CSS 填充

Question

在我的 website, I added the following code which I had only intended to apply to my posts, like this.

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

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

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

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

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

Answer 1

对于主页 page/front 页面只需提供另一个自定义 class 名称并将填充设为 0 否则您需要并写入“!important”。例如 .cstm_home { 填充: 0 重要; } 。希望能解决您的问题。

Answer 2

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

一种更谨慎的方法是使用另一种类型的选择器而不是您的段落标记，在您想要以上述方式设置样式的所有段落中放置一个 id，并在您的 CSS.

干杯！希望对您有所帮助....

Answer 3

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

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

而 css 会像。

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

创建 class 后，您可以根据需要设置这些页面的样式。它只会针对主页段落。希望这可以帮助。如果您有更多问题，请告诉我

Answer 4

欢迎艾哈迈德。

人们给你的建议没有用，与 class 名称有关（注意名称前的点：.home | .ports-loop | .entry-summary 。这表明是 classes).

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

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

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

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

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

Answer 5

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

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

解决方案 2：使用 css 选择器更加具体。例如，如果帖子的包装 div 具有 .posts 的 class，请按如下方式编写 css：

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

How can I change the CSS padding for just the homepage/frontpage