html - 如何更改标签以不同于另一个页面上使用的类似标签？

Question

我在另一个页面上使用了一些标签(h4、p、ul 和 li)(这些干扰元素中包含 CSS)，这些标签的样式设置为居中。我在不同的页面上有相同的标签，但不希望它们的样式相同。包含的 HTML 是我希望标签不同的页面，而不是样式标签所针对的原始页面。

我的代码:

h4 {
  text-align: center;
}


/*Paragraph Stuff*/

p {
  text-align: center;
}


/*Header Things*/

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}


/*Contact Stuff*/

.left {
  float: left;
}

.right {
  float: right;
}


/*Contact Header Stuff*/

#headerLeft {
  text-align: left;
}

#headerRight {
  text-align: right;
}


/*Contact p stuff*/

#pLeft1 {}

#pLeft2 {
  text-align: left;
}

#pRight1 {
  text-align: right;
}

#pRight2 {
  text-align: right;
}


/*Contact ul & li stuff*/

#ulLeft {
  text-align: left;
}

#liLeft1 {
  text-align: left;
  float: left;
}

#liLeft2 {
  text-align: left;
  float: left;
}

#liLeft3 {
  text-align: left;
  float: left;
}


/*About List Stuff*/

ul {
  margin: 0 auto;
  width: 1200px;
  padding-left: 0;
  font-size: 0;
}

li {
  font-size: 18px;
  list-style-type: none;
  width: 150px;
  height: 50px;
  line-height: 50px;
  margin: 15px auto;
  box-sizing: border-box;
  text-align: center;
}

<div class="wrapper">
  <div class="wrapper__section">

    <h3 id="headerLeft"> Want to be informed of new content? </h3>
    <p id="pLeft"> Then join my newsletter and never miss out again! </p>

    <form>
      <!-- Start Form -->
      <label for="fName">First Name:</label>
      <input type="text" id="fName" name="fName">
      <label for="email">Email:</label>
      <input type="email" name="email" id="email">
      <p>I would like more information about:</p>
      <ul id="ulLeft">
        <li><input type="checkbox" name="newart" id="newart" value="newart" class="chkbx">New Art</li>
        <li><input type="checkbox" name="announ" id="announ" value="announ" class="chkbx">Announcements</li>
        <li><input type="checkbox" name="commi" id="commi" value="commi" class="chkbx">Commissions</li>
      </ul>
      <input type="submit" id="submit" value="Submit" class="btn">
      <input type="reset" id="reset" value="Reset Form" class="btn">
    </form>
  </div>

  <div class="wrapper__section">
    <h3 id="headerRight"> Want a commission?</h3>
    <p>Contact me @ </p> <a href="mailto:kaijumydude@gmail.com">KaijuMyDude@gmail.com</a>
    <p> or DM me on social media </p>
    <a href="https://www.instagram.com/kaijumydude/" target="_blank"><img src="Images/instaicon.png" style=" width: 5%;" alt="Instagram logo"> </a>
  </div>
</div>

Answer 1

有多种方法，这里有一些:

1) 将一个单独的样式表附加到第二页的头部，带有您喜欢的任何标记样式

2) 使用类为元素指定样式。类将覆盖标记样式，因为它更具体。 https://www.w3schools.com/html/html_classes.asp

例子。

HTML:

<div class="alignLeft"></div>

CSS:

.alignLeft{
   text-align:left;
}

3) 内联元素样式，这些样式将覆盖大多数 CSS 文件样式

例子。

HTML

<div style="text-align:left;"></div>

我还建议您浏览一些 https://www.codecademy.com/教程(如果您刚刚起步)。