p 标签已经为一个页面设置了样式，但我想为另一页设置不同的样式答案

【问题标题】：p tag already styled for one page but I want to style it differently for another pagep 标签已经为一个页面设置了样式，但我想为另一页设置不同的样式
【发布时间】：2016-06-18 17:38:27
【问题描述】：

在我的主页上，我有带有悬停效果的图像，文本显示为带有 P 标签的悬停样式，所以一切正常。

但是，在我的 about 页面上，我尝试添加文本并使用 P 将其拆分，但是由于我已经为主页设置了 P 样式，因此 about 页面中的 P 元素正在为主页设置样式。

我尝试在 about.html 中为 P 添加一个类，但没有奏效。

任何想法如何让 P 标签具有 2 种不同类型的样式？

我什至无法显示 about.html 上的文本。

这是我的 index.html 代码

p {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    color: white;
    font-family: helvetica, arial, sans-serif;
    font-size: 18px;
    height: 100%;
    left: 0;
    line-height: 1.5em;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 15%;
    position: absolute;
    top: 100%;
    transition: all 1s ease 0s;
    width: 97%;
}
p .heading {
    color: #FFD829;
    display: block;
    font-size: 24px;
    padding-bottom: 15px;
}

p a {
    text-decoration: none;
    color: #FFD829;
}
p img {
    padding-left: 40px;
    padding-top: 20px;
}
p iframe {
    padding-left: 10%;
}

【问题讨论】：

从头部进入
该主页的样式是如何设计的？在css文件中？也许您的 about.html 也使用相同的文件作为样式源？
@JanWalczak 看起来他没有创建 css 文件。他用
这个问题已经回答here
如果没有您的 html 代码，很难猜测具有更高特异性的选择器是否可以使用，或者是否需要其他方式。 ...

标签： html css

【解决方案1】：

你有两个意思去做你期望的事情：如果你想用相同的设计修改几个 p 标签，你可以添加一个类所有这些 p 标签，然后在一个样式标签或外部样式表中设计不同的标签。

对于您的 about.html 中的示例

<p class="newStyle"></p>

在你的 CSS 中

.newStyle {
  //your attributes
}

如果您只需要一个 p 标签的另一种设计，您可以在此使用 id 属性，并且该设计将仅适用于该 p 标签（注意 id 在您的页面中必须是唯一的）

html

<p id="newStyle"></p>

css：

#newStyle {
      //your attributes
    }

如果您在 html 中使用样式标记，您可以使用 W3C 验证器验证您的页面，以确保您没有任何问题： https://validator.w3.org/#validate_by_input

如果您使用外部样式表，请务必将其包含在您的页面中，并带有链接标签：

它还存在一个 css 验证器，你可以用来检查你没有出错： https://jigsaw.w3.org/css-validator/

【讨论】：

操作员说他尝试过但失败了....我们需要更多信息来给出一些有用的答案;)
是的，目前我们只能给他元素来分析他自己的代码。

【解决方案2】：

1) 创建 2 个类

p.home

p.about

2)您可以使用!important覆盖以前应用的样式

【讨论】：

【解决方案3】：

只需从您的about.html 页面中删除<link type="text/css" rel="stylesheet" href="style.css">。后来添加的 P 定义将起作用。

【讨论】：