Question

在我的主页上，我有悬停效果的图片，文字显示为带有P标签的悬停样式，因此一切正常。

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

我尝试在about.html中为P添加一个类，但这不起作用。

我有什么想法可以让P标签有两种不同类型的样式？

我甚至无法显示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标签的类，然后在样式标签或外部样式表设计中添加不同的标签。

for 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/

Answer 2

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

Answer 3

1）创建2个类

p.home

p.about

2）您可以使用!important

覆盖以前应用的样式

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

3 个答案: