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

Question

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

然而，在我的关于页面上，我试图添加文本并使用 P 将其拆分，但是因为我已经为主页设置了 P 样式，关于页面中的 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%;
}

Answer 1

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

在您的 about.html 中作为示例

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

在你的 CSS 中

.newStyle {
  //your attributes
}

如果你只想要一个 p 标签的另一种设计，你可以在上面使用 id 属性，并且设计将只应用于这个 p 标签(注意 id 在你的页面中必须是唯一的)

html

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

样式:

#newStyle {
      //your attributes
    }

If your are using a style tag inside your html you can validate your page with a W3C validator to make sure you have no issue in it : https://validator.w3.org/#validate_by_input

if you are using an external stylesheet be sure to include it in your page with the link tag :

It exist also a css validator you can used to check you have no make mistake in it : https://jigsaw.w3.org/css-validator/